Template Blogger Si Bisnis HTML5 & Responsive

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTu8pcIlVIy5TCn1u53ozQab2CG6zJC1VKJU9Y_o9tTNRBlFYPdpQtfeAiKw7NFhnqnrTlgoH0DD0yvXerwJ0ydE9dwGkxAx5gNfTB3PnKqHzUeILx1OJdA8ERswP69Fst5eU0zHtB-Vi3/s1600/Si+Bisnis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Blogger Si Bisnis HTML5 & Responsive" border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTu8pcIlVIy5TCn1u53ozQab2CG6zJC1VKJU9Y_o9tTNRBlFYPdpQtfeAiKw7NFhnqnrTlgoH0DD0yvXerwJ0ydE9dwGkxAx5gNfTB3PnKqHzUeILx1OJdA8ERswP69Fst5eU0zHtB-Vi3/s400/Si+Bisnis.png" title="Template Blogger Si Bisnis HTML5 & Responsive" width="400" /></a></div><br />Template Blogger Si Bisnis HTML5 & Responsive | 1 minggu sibuk ngetemplate..akhirnya di publish juga. Template yang sudah lama saya simpan ini, sebenarnya tidak akan saya publish, ya karena pembuatannya yang gampang dan jarang orang yang memakai. Tapi karena ide baru buntu di jalan cinta, terpaksa ini aku share ke blogger. Template tanpa header...mungkin aneh, tapi bagi saya itu suatu design yang minimalis. Apalagi ini template bisnis online, jadi headerpun tidak terlalu penting.<br /><h3>Apa saja yang ada di Si Bisnis ?</h3><ol><li>Responsive Blogger Template</li><li>2 Coloumn</li><li>Valid HTML5 </li><li>Without Comment</li><li>Without Header</li><li>Super Fast Loading</li><li>Super Simple</li><li>Super  <strike>Sucker </strike>Minimalis</li></ol><h3>Cara Pemakaian</h3>Banner yang berwarna kuning bisa anda temukan di bawah main-wrapper, lalu ganti url gambar dengan gambar anda. <br /><pre>http://s20.postimg.org/r6qrtflp9/Graphic1.jpg</pre><br />Gunakan laman sebagai artikel anda lalu masukan link di :<br /><pre><nav id='nav'><br />       <ul><br />           <li><a href='/'>Home</a></li><br />           <li><a href=''>Contact</a></li><br />           <li><a href=''>Cara Bisnis</a></li><br />           <li><a href='/'>Comments</a></li><br />       </ul><br />    </nav></pre><br /><div style="text-align: center;"><a class="button" href="http://responsinator.com/?url=http%3A%2F%2Fmaemanku.blogspot.com%2F" target="_blank">Test Responsive</a> </div><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="button" href="http://si-bisnis.blogspot.com/" target="_blank">Demo</a>                 <a class="button" href="https://www.dropbox.com/s/h0j89z9w0vrgqup/Si%20Bisnis.xml" target="_blank"> Download</a></div><br/><h3>Apapun yang ada di halaman demo, hanya di gunakan untuk contoh saja, tidak bermaksud promosi</h3>

Template Blogger Si Bisnis HTML5 & Responsive

Template Blogger Si Bisnis HTML5 & Responsive | 1 minggu sibuk ngetemplate..akhirnya di publish juga. Template yang sudah lama saya simp...

Baca selengkapnya »

Memasang Joomla! Di Localhost Terupdate

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQRJ-_cda354YKnO8KIpILVw9OjRdwvZQarxmC3-TgygLlEG6cV17RtBscLdRmA1Q5fzNzpizCyYuH_5F0IPVpQMAjfA823p5KfJWH3m57c4hFOEd6dTkqYXeDT9an5VZLiFsnm9aY7tVl/s1600/Install+Joomla!.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQRJ-_cda354YKnO8KIpILVw9OjRdwvZQarxmC3-TgygLlEG6cV17RtBscLdRmA1Q5fzNzpizCyYuH_5F0IPVpQMAjfA823p5KfJWH3m57c4hFOEd6dTkqYXeDT9an5VZLiFsnm9aY7tVl/s400/Install+Joomla!.png" width="400" /></a></div><br />Memasang Joomla! Di Localhost Terupdate | Dulu pernah saya share juga memasang <a href="http://www.bocahit.com/2012/09/cara-menginstall-joomla.html" target="_blank">joomla!</a>. Kali ini beda, kenapa? kita tahu Joomla! adalah salah satu dari CMS, jadi wajar saja jika dianya sering update. Nah, ternyata saat install Joomla! pun juga sudah di update, karena itu saya coba buat share masalah ini.<br /><br />Sebenarnya prosesnya sama, hanya langkah - langkahnya yang di ringkas. Lebih baik anda membaca artikel cara<a href="http://www.bocahit.com/2012/09/cara-menginstall-joomla.html" target="_blank"> install via localhost.</a><br />1. Configuration<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaR7BeQPx-TkJCL0LzuIiRtJtH3AFmW1sAyUITiOqh-li3jQa4DTnYfOFNeHLd62afQKYIPQxmoZGmjhe7CvB5VMlMFcrw-xb_L9eqp57LmpKYnhy3pngjZTjhpNM4jxo5vtrz5iP_Egx/s1600/j1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Joomla! Di Localhost Terupdate" border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaR7BeQPx-TkJCL0LzuIiRtJtH3AFmW1sAyUITiOqh-li3jQa4DTnYfOFNeHLd62afQKYIPQxmoZGmjhe7CvB5VMlMFcrw-xb_L9eqp57LmpKYnhy3pngjZTjhpNM4jxo5vtrz5iP_Egx/s400/j1.PNG" title="Memasang Joomla! Di Localhost Terupdate" width="400" /></a></div>Ketika anda melihat <u>Site Offline</u> maka klik YES. Yang artinya anda membangun site dengan keadaan offline.<br /><br />2.Database Configuration<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_46D981BFnjGCqjmJr7i6zTbMc61_yl1lP48T5Z5FPtyx6mWtJLMdR4LOSaLTU8wI43Hdjq-jJRcLDp-VL1JD8S0i5Hh2Yqh68tlbqVv4Zun9Ne09EvdetzU6TH0eXb43nC6SbTc8umai/s1600/j2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Joomla! Di Localhost Terupdate" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_46D981BFnjGCqjmJr7i6zTbMc61_yl1lP48T5Z5FPtyx6mWtJLMdR4LOSaLTU8wI43Hdjq-jJRcLDp-VL1JD8S0i5Hh2Yqh68tlbqVv4Zun9Ne09EvdetzU6TH0eXb43nC6SbTc8umai/s400/j2.PNG" title="Memasang Joomla! Di Localhost Terupdate" width="400" /></a></div><br />Yang perlu anda lakukan, mengganti Database Type menjadi MySQL kemudian Username anda adalah root terakhir Nama Database, terserah anda.<br /><br />3. Overview<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhENxNucLPRiVYKYbgehUOz4QL8q0X3jlW_K21QOTNT909ZuPoA3IZoZ6jqHOuD_JI_LUdFu8gKvbYBmCReDjsiVVyG44pRxSXqxuGCMYIRf01zwiQ1WG0PgR1Bf0NyalMY9msStnimSHrk/s1600/j3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Joomla! Di Localhost Terupdate" border="0" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhENxNucLPRiVYKYbgehUOz4QL8q0X3jlW_K21QOTNT909ZuPoA3IZoZ6jqHOuD_JI_LUdFu8gKvbYBmCReDjsiVVyG44pRxSXqxuGCMYIRf01zwiQ1WG0PgR1Bf0NyalMY9msStnimSHrk/s400/j3.png" title="Memasang Joomla! Di Localhost Terupdate" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"></div>Ini adalah informasi dari langkah sebelumnya. Pada Email Configuration, pilih NO jika tidak ingin menerima pemberitahuan atau sebaliknya.<br /><br />4. Installing<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_2HGCDJmEb5VZWBwQKDUYmqU4UmCQK85LChvHTbHu2Ha5Yby33Ra7AYYFxE1SwWphdMZme0GrxHYCdgg9xhD81SkNOPAoGq3ugTrL46UAVk8off5VW_hU_5b2Gt2PRE5Hqt9WdJH3eCF/s1600/j4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Joomla! Di Localhost Terupdate" border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_2HGCDJmEb5VZWBwQKDUYmqU4UmCQK85LChvHTbHu2Ha5Yby33Ra7AYYFxE1SwWphdMZme0GrxHYCdgg9xhD81SkNOPAoGq3ugTrL46UAVk8off5VW_hU_5b2Gt2PRE5Hqt9WdJH3eCF/s400/j4.png" title="Memasang Joomla! Di Localhost Terupdate" width="400" /></a></div>5.Login As Administrator.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0nUCVWT56oAPWq3DAVYEFkOowj7iUQhxP5h21LdzkLaTiZUIzMn-hoR36jMMtASFbERPi3blpocRPCzMxCtfcEfP8qBFTz9b_D0lV4ysxv-4zmLDV1nQryMDjtuB1c-yszpM3CYCXdHGd/s1600/j6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Joomla! Di Localhost Terupdate" border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0nUCVWT56oAPWq3DAVYEFkOowj7iUQhxP5h21LdzkLaTiZUIzMn-hoR36jMMtASFbERPi3blpocRPCzMxCtfcEfP8qBFTz9b_D0lV4ysxv-4zmLDV1nQryMDjtuB1c-yszpM3CYCXdHGd/s400/j6.png" title="Memasang Joomla! Di Localhost Terupdate" width="400" /></a></div><br />Sekarang anda bisa menikmati Joomla! dengan interface yang baru. BTW...ini joomla! versi berapa ?ini joomla! versi 3.1.5 Full Package.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJyDQBQZwXHyeWKkromZt2GvrZbkW9POGalKDG2hCvE2Ra4aq-Kufg3HS1SrSz6ZZS6nM1ZJv8pGxfY5_uYMhozCDeinDLsPsMb96gbdiKUUe-9unekRtHgFWat4uCDPhGzZFl9dlL3gZ/s1600/j7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJyDQBQZwXHyeWKkromZt2GvrZbkW9POGalKDG2hCvE2Ra4aq-Kufg3HS1SrSz6ZZS6nM1ZJv8pGxfY5_uYMhozCDeinDLsPsMb96gbdiKUUe-9unekRtHgFWat4uCDPhGzZFl9dlL3gZ/s400/j7.png" width="400" /></a></div><br />

Memasang Joomla! Di Localhost Terupdate

Memasang Joomla! Di Localhost Terupdate | Dulu pernah saya share juga memasang joomla! . Kali ini beda, kenapa? kita tahu Joomla! adalah sal...

Baca selengkapnya »

Tooltips Paling Keren Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcMLeWLiuvSaCO5-4n9gi8sJRrxvW1hk7VMwKuqjJKSWgkBGFfLxxjVCn34059qDo-p_7pW-1V7u-TJTZFmHA-CWtuySyxy0K-Ccsl4LqoQ6oKf0hRB9jzDqW1MBuCpgJ7VBNwzrXSrea/s1600/Tooltips+Pseudo+Elemen+&+Transisi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcMLeWLiuvSaCO5-4n9gi8sJRrxvW1hk7VMwKuqjJKSWgkBGFfLxxjVCn34059qDo-p_7pW-1V7u-TJTZFmHA-CWtuySyxy0K-Ccsl4LqoQ6oKf0hRB9jzDqW1MBuCpgJ7VBNwzrXSrea/s400/Tooltips+Pseudo+Elemen+&+Transisi.png" /></a></div>Tooltips Paling Keren Dengan CSS3 | Belum selesai di masalah tooltips.Kemarin sudah lihat tooltips versi 1 dan 2 ? jika belum, klik <a href="http://www.bocahit.com/2013/08/iseng-iseng-dari-tooltips-pakai-pseudo.html" target="_blank">disini</a> atau <a href="http://www.bocahit.com/2013/08/tooltips-super-duper-keren-dengan-css3.html" target="_blank">disini</a>. Masih memakai Pseudo Element & Transition. Hanya saja yang menjadi ada di border radius saja. Silakan dilihat.<br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a_23.html" target="_blank">Ilustrasi</a></div><br /><h3>CSS</h3><pre>a.tooltip {<br /> position: relative;<br /> display: inline;<br />}<br /><br />a.tooltip span {<br /> width: 80px;<br /> height: 80px;<br /> line-height: 80px;<br /> padding: 10px;<br /> left: 50%;<br /> margin-left: -55px;<br /> font-family: 'Alegreya SC', Georgia, serif;<br /> font-weight: 400; <br /> font-style: italic;<br /> font-size: 14px;<br /> color: #719DAB;<br /> text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);<br /> text-align: center;<br /> border: 5px solid #fff;<br /> background: rgba(255,255,255,0.5);<br /> text-indent: 0px;<br /> position: absolute;<br /> pointer-events: none;<br /> border-radius: 50%;<br /> bottom: -40px;<br /> opacity: 0;<br /> box-shadow: 0px 3px 8px rgba(0,0,0,0.1);<br /> -webkit-transform: scale(0.2);<br /> -moz-transform: scale(0.2);<br /> -o-transform: scale(0.2);<br /> -ms-transform: scale(0.2);<br /> transform: scale(0.2);<br /> -webkit-transition: all 0.3s ease-in-out;<br /> -moz-transition: all 0.3s ease-in-out;<br /> -o-transition: all 0.3s ease-in-out;<br /> -ms-transition: all 0.3s ease-in-out;<br /> transition: all 0.3s ease-in-out;<br />}<br /><br />a:hover.tooltip span {<br /> opacity: 0.9;<br /> bottom: 20px;<br /> -webkit-transform: scale(1);<br /> -moz-transform: scale(1);<br /> -o-transform: scale(1);<br /> -ms-transform: scale(1);<br /> transform: scale(1);<br />}<br /></pre><br/><h3>HTML</h3><pre><a class="tooltip" href="#">Add On Fb<span>Facebook</span></a><br /> <a class="tooltip" href="#">Add Circle<span>Goggle +</span></a><br /> <a class="tooltip" href="#">Follow Me<span>Twitter</span></a></pre><br/>

Tooltips Paling Keren Dengan CSS3

Tooltips Paling Keren Dengan CSS3 | Belum selesai di masalah tooltips.Kemarin sudah lihat tooltips versi 1 dan 2 ? jika belum, klik disini ...

Baca selengkapnya »

Tooltips Super Duper Keren Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinggd2_hyYmgaXeyh09Bz30lY18xmw3lZvTjPU7nMg6q8CjVfWsgcvAPKiI3cYVZ6PIyTW9bDd0mWHxDgDhqS34IKzLcITjnkBksBAODdHxPoabXi7lNZfuKx7GOejtRdBOdT5-raVRBs8/s1600/Tooltips+Pseudo+Elemen+&+Transisi+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinggd2_hyYmgaXeyh09Bz30lY18xmw3lZvTjPU7nMg6q8CjVfWsgcvAPKiI3cYVZ6PIyTW9bDd0mWHxDgDhqS34IKzLcITjnkBksBAODdHxPoabXi7lNZfuKx7GOejtRdBOdT5-raVRBs8/s400/Tooltips+Pseudo+Elemen+&+Transisi+2.png" width="400" /></a></div><br />Tooltips Super Duper Keren Dengan CSS3 | Kalau kemarin cuma iseng - iseng aja buat <a href="http://www.bocahit.com/2013/08/iseng-iseng-dari-tooltips-pakai-pseudo.html" target="_blank">tooltips</a>, kali ini malah di ubah tetapi tetap pada transition & pseudo element. Cocok untuk blog yang mengutamakan penampilan. Silahkan lihat ilustrasinya....<br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a_22.html" target="_blank">ILUSTRASI</a></div><div style="text-align: center;"><br /></div><div style="text-align: left;">Bagaimana? tertarik ? langsung di pasang....</div><br /><h3>CSS</h3><br /><pre>a.tooltip {<br /> position: relative;<br /> display: inline;<br />}<br /><br />a.tooltip span {<br /> width: 100px;<br /> height: auto;<br /> line-height: 20px;<br /> padding: 10px;<br /> left: 50%;<br /> margin-left: -64px;<br /> font-family: 'Alegreya SC', Georgia, serif;<br /> font-weight: 400; <br /> font-style: italic;<br /> font-size: 14px;<br /> color: #719DAB;<br /> text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);<br /> text-align: center;<br /> border: 4px solid rgba(106, 131, 227, 0.4);<br /> background: rgba(255,255,255,0.3);<br /> text-indent: 0px;<br /> border-radius: 5px;<br /> position: absolute;<br /> pointer-events: none;<br /> bottom: 100px;<br /> opacity: 0;<br /> box-shadow: 1px 1px 2px rgba(0,0,0,0.1);<br /> -webkit-transition: all 0.3s ease-in-out;<br /> -moz-transition: all 0.3s ease-in-out;<br /> -o-transition: all 0.3s ease-in-out;<br /> -ms-transition: all 0.3s ease-in-out;<br /> transition: all 0.3s ease-in-out;<br /><br />} <br /> <br />a.tooltip span:after {<br /> bottom: -14px;<br /> margin-left: -10px;<br /> border-top: 10px solid #fff;<br /><br />}<br /><br />a.tooltip span:before, a.tooltip span:after {<br /> content: '';<br /> position: absolute;<br /> bottom: -15px;<br /> left: 50%;<br /> margin-left: -9px;<br /> width: 0;<br /> height: 0;<br /> border-left: 10px solid transparent;<br /> border-right: 10px solid transparent;<br /> border-top: 10px solid rgba(106, 131, 227, 0.4);<br /> }<br /> <br />a:hover.tooltip span {<br /> visibility: visible;<br /> opacity: 0.8;<br /> bottom: 30px;<br /> z-index: 999;<br /> visibility: visible;<br /> opacity: 0.9;<br /> -webkit-transform: translate(0px) rotate(0deg) scale(1);<br /> -moz-transform: translate(0px) rotate(0deg) scale(1);<br /> -o-transform: translate(0px) rotate(0deg) scale(1);<br /> -ms-transform: translate(0px) rotate(0deg) scale(1);<br /> transform: translate(0px) rotate(0deg) scale(1);<br />}<br /></pre><br /><h3>HTML</h3><pre><a class="tooltip" href="#">Add On Fb<span>Facebook</span></a><br /> <a class="tooltip" href="#">Add Circle<span>Goggle +</span></a><br /> <a class="tooltip" href="#">Follow Me<span>Twitter</span></a><br /></pre><br />Selamat mencoba bro...

Tooltips Super Duper Keren Dengan CSS3

Tooltips Super Duper Keren Dengan CSS3 | Kalau kemarin cuma iseng - iseng aja buat tooltips , kali ini malah di ubah tetapi tetap pada trans...

Baca selengkapnya »

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaE5zovnA9c59oZkT8R3WYAqiA7WOeaas0sRwDxOfBiMd_hlqdvJTH0LhWNPEqECAbAV7F6BG9bDjEgmT5lcUvaKzt5DWvDg5BldsSpmbtM3QeVPNEYu5krIjs00DuB1buiA4VjvEtTD2/s1600/Tooltips+Pseudo+Elemen+&+Transisi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaE5zovnA9c59oZkT8R3WYAqiA7WOeaas0sRwDxOfBiMd_hlqdvJTH0LhWNPEqECAbAV7F6BG9bDjEgmT5lcUvaKzt5DWvDg5BldsSpmbtM3QeVPNEYu5krIjs00DuB1buiA4VjvEtTD2/s400/Tooltips+Pseudo+Elemen+&+Transisi.png" title="Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi" width="400" /></a></div><br />Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi | Dari iseng - iseng,,mainan Transisi di <a href="http://www.css3maker.com/css3-transition.html" target="_blank">CSS3 Maker</a> terus sedikit tambahan dengan Pseudo Elemen di Dreamweaver, ehh ga sengaja malah jadi tooltips. Padahal ga punya ide buat tooltips...Tooltips yang sangat super keren..(hikz) menurut saya. Maklum saya adalah Noob Designer...Keren menurut saya jelek menurut anda. Tapi seperti ini lah.<br /><br /><h3>HTML</h3><pre>  <a class="tooltip" href="#">Add On Fb<span>Facebook</span></a><br />  <a class="tooltip" href="#">Add Circle<span>Goggle +</span></a><br />  <a class="tooltip" href="#">Follow Me<span>Twitter</span></a><br />  </pre><br />Yups, dari markupnya memang sama seperti tutorial <a href="http://www.bocahit.com/2013/06/cara-membuat-pure-css3-tooltips-di-blog.html" target="_blank" title="Tutorial Membuat Pure Tooltips">membuat tooltips</a>. <br /><h3>CSS</h3><pre>a.tooltip {<br /> position: relative;<br /> display: inline;<br />}<br />a.tooltip span {<br /> width: 100px;<br /> height: auto;<br /> line-height: 20px;<br /> padding: 10px;<br /> left: 50%;<br /> margin-left: -64px;<br /> font-family: 'Alegreya SC', Georgia, serif;<br /> font-weight: 400; <br /> font-style: italic;<br /> font-size: 14px;<br /> color: #719DAB;<br /> text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);<br /> text-align: center;<br /> border: 4px solid #fff;<br /> background: rgba(255,255,255,0.3);<br /> text-indent: 0px;<br /> border-radius: 5px;<br /> position: absolute;<br /> bottom: 70px;<br /> opacity: 0;<br /> pointer-events: none;<br /> box-shadow: 1px 1px 2px rgba(0,0,0,0.1);<br /> -webkit-transform: translate(35px) rotate(25deg) scale(1.5);<br /> -moz-transform: translate(35px) rotate(25deg) scale(1.5);<br /> -o-transform: translate(35px) rotate(25deg) scale(1.5);<br /> -ms-transform: translate(35px) rotate(25deg) scale(1.5);<br /> transform: translate(35px) rotate(25deg) scale(1.5);<br /> -webkit-transition: all 0.3s ease-in-out;<br /> -moz-transition: all 0.3s ease-in-out;<br /> -o-transition: all 0.3s ease-in-out;<br /> -ms-transition: all 0.3s ease-in-out;<br /> transition: all 0.3s ease-in-out;<br /><br />} <br /> <br />a.tooltip span:after {<br /> bottom: -14px;<br /> margin-left: -10px;<br /> border-top: 10px solid #fff;<br /><br />}<br /><br />a.tooltip span:before, a.tooltip span:after {<br /> content: '';<br /> position: absolute;<br /> bottom: -15px;<br /> left: 50%;<br /> margin-left: -9px;<br /> width: 0;<br /> height: 0;<br /> border-left: 10px solid transparent;<br /> border-right: 10px solid transparent;<br /> border-top: 10px solid rgba(0,0,0,0.1);<br /> }<br /> <br />a:hover.tooltip span {<br /> visibility: visible;<br /> opacity: 0.8;<br /> bottom: 30px;<br /> z-index: 999;<br /> visibility: visible;<br /> opacity: 0.9;<br /> -webkit-transform: translate(0px) rotate(0deg) scale(1);<br /> -moz-transform: translate(0px) rotate(0deg) scale(1);<br /> -o-transform: translate(0px) rotate(0deg) scale(1);<br /> -ms-transform: translate(0px) rotate(0deg) scale(1);<br /> transform: translate(0px) rotate(0deg) scale(1);<br />}<br /></pre><br />Pseudo Elemen bisa di pelajari dan dipratekan di <a href="http://www.w3schools.com/css/css_pseudo_elements.asp" target="_blank">W3school CSS Pseudo Element</a>. Gampang kan, silakan dipakai. Dari ini saya jadi dapatkan ide lagi buat tooltips yang lainnya...<br /><br /><div style="text-align: center;"> <a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a.html" target="_blank" title="Demo">Ilustrasi</a></div>

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi | Dari iseng - iseng,,mainan Transisi di CSS3 Maker terus sedikit tamba...

Baca selengkapnya »

Template Blog Terkeren Yang Pernah Wammy Lihat

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdW6k9lTqQkq7Jwcx372secFTmCePzNpX9fx8q8-ZhnGM4MDLVR1KF2fneXr-5D3ZRVpmImRqm0-b_fdzjuYq-RmRsATboetydJjgj_ALItenloAAAzEdj_I_2MbG-5doq7DqLajcYmzt/s1600/page1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdW6k9lTqQkq7Jwcx372secFTmCePzNpX9fx8q8-ZhnGM4MDLVR1KF2fneXr-5D3ZRVpmImRqm0-b_fdzjuYq-RmRsATboetydJjgj_ALItenloAAAzEdj_I_2MbG-5doq7DqLajcYmzt/s200/page1.jpg" width="200" /></a></div><br /><span style="color: red;">Template Blog Terkeren Yang Pernah Wammy Lihat</span> | 2 template ini adalah template yang paling elegan yang pernah wammy lihat selama di dunia blogging. Tidak hanya Elegan tetapi juga Keren. Kalau masalah SEO Friendly itu tergantung kita saja yang pandai membuat jadi SEO Friendly. <br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://newbloggerthemes.com/wp-content/uploads/2012/11/Tyrant-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="266" src="http://newbloggerthemes.com/wp-content/uploads/2012/11/Tyrant-Blogger-Template.jpg" title="Tyrant Blogger Template" width="320" /></a></div><br />Nama     : Tyrant <br /><div style="text-align: justify;">Katagori : 1 Sidebar, 2 Columns, Adapted from Wordpress, Brown, Elegant, Featured Section, Fixed width, Fresh, Magazine, Red, Right Sidebar, Slider, Top Navigation Bar, Web 2.0, White<br /><br /><span style="font-family: inherit;">Untuk mengatur slider, cari code dibawah ini :</span><br /><pre class="brush:js;"><ul class='slides'><br /> <br /><li><br /><a href='ENTER-SLIDE-1-LINK-HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMS3Jlgl8D9XftrRqYzQDGGPlxnO-khItNUlX8H1zz9wB-2JIR25hpJo2V4-2D_8yRQ1XE0-q31uqTlnoeMhZVEz122jkq41T9kqTjoPPteiY7NN2CqtRum2-iwBmoJE1IgkIOgi7kGUw/s1600/image-1.jpg'/></a><br /><div class='flex-caption'><br /><h3>Enter Slide 1 Title Here - NewBloggerThemes.com</h3><br /></div><br /></li><br /><br /><li><br /><a href='ENTER-SLIDE-2-LINK-HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhht6e3X_H6dc__PI3RhLyBPpcOsgNR-8X5pCWUrhvq2eNN7RyEa18iFbz5O7pwpR1iqEY_0TFUnnHlsdab48L3SlSN5Uc_OU95HK9_hSh6mOBB-j2YYGSPd4wrJ9u99bg0fio5k_2TB0Q/s1600/image-2.jpg'/></a><br /><div class='flex-caption'><br /><h3>Enter Slide 2 Title Here - NewBloggerThemes.com</h3><br /></div><br /></li><br /><br /><li><br /><a href='ENTER-SLIDE-3-LINK-HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZp2RcietZ7TJCVao_IybFdb01OblW-eHg0xG_Bae4hE9R1Jutlz1ycVuGkpf8nXdbFgKyOtHTyrkf9Ny2wnYox0o9yrPRmFJU6hS-kSifo8G6lllmNlVxc-Y5DtRrN8fNELZ8Mxgi11s/s1600/image-3.jpg'/></a><br /><div class='flex-caption'><br /><h3>Enter Slide 3 Title Here - NewBloggerThemes.com</h3><br /></div><br /></li><br /><br /></ul><br /></pre><br /><div style="text-align: center;"><a class="button" href="http://newbloggerthemes.com/tyrant-blogger-template/demo/" target="_blank">Demo</a>            <a class="button" href="http://adf.ly/HTumT" target="_blank">Download</a></div><div style="text-align: center;">  </div><div class="separator" style="clear: both; text-align: center;"><a href="http://newbloggerthemes.com/wp-content/uploads/2012/11/Covenant-Blogger-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="266" src="http://newbloggerthemes.com/wp-content/uploads/2012/11/Covenant-Blogger-Template.jpg" title="Covenant Blogger Template" width="320" /></a></div><br />Nama     : Covenant<br />Katagori :  1 Sidebar, 2 Columns, 4 Column Footer, Adapted from Wordpress, Black, Elegant, Featured Section, Fixed width, Fresh, Grey, Header Banner, Magazine, Premium, Right Sidebar, Rounded corners, Slider, Top Navigation Bar, Web 2.0, White<br /><br />Untuk Menga<span style="font-family: inherit;">tur Slider : Cari code di bawah ini!!</span><br /><pre class="brush:js;"><li><br /><div class='mytext'><br /><a href='ENTER-SLIDE-1-LINK-HERE'><br /><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVlBE3-SlnF3TkwErY-rIcBz6Cm52ueobUWeftjinASJ31Wqp4TVQFhzh356BgdyBjJKIQcT3hSoayPSa7TQWj33lZCa3-rFIM6e3uCFwJWvBL38lOKeqPmTXH0qCXLxZzS0ySpanFjdU/s1600/img-1.jpg'/><br /></a><br /><div class='inpost'><br /><h2><a href='ENTER-SLIDE-1-LINK-HERE'>Enter Slide 1 Title Here</a></h2><br /></div> <br /><div class='clear'/> <br /><p>This is slide 1 description. This Blogger Template is Designed By NewBloggerThemes.com. Go to Edit HTML and find this. Replace this with your own description ...</p><br /></div> <br /></li><br /></pre><div style="text-align: center;"><a class="button" href="http://newbloggerthemes.com/covenant-blogger-template/demo/" target="_blank">Demo</a>               <a class="button" href="http://adf.ly/HTuzc" target="_blank">Download</a></div></div>

Template Blog Terkeren Yang Pernah Wammy Lihat

Template Blog Terkeren Yang Pernah Wammy Lihat | 2 template ini adalah template yang paling elegan yang pernah wammy lihat selama di dunia ...

Baca selengkapnya »

Cara Mengatur Script Menghubungkan Database Dari Hosting

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUTXZkC62WcrNw_Udw_aluinqdFTUtw6ht5UOEI6iBhXYyxPrIP71mle3mFqkAtm-S3ajO6QNoiHRO_jNExjkLnRDX7Wh8cPjBUlIZ8lPE38JR7NYsrqKX5FtvAfQyKPBM5SpMj-pY9jj/s1600/Sync+DB.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatur Script Menghubungkan Database Dari Hosting" border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUTXZkC62WcrNw_Udw_aluinqdFTUtw6ht5UOEI6iBhXYyxPrIP71mle3mFqkAtm-S3ajO6QNoiHRO_jNExjkLnRDX7Wh8cPjBUlIZ8lPE38JR7NYsrqKX5FtvAfQyKPBM5SpMj-pY9jj/s320/Sync+DB.jpg" title="Cara Mengatur Script Menghubungkan Database Dari Hosting" width="320" /></a></div><br />Cara Mengatur Script Menghubungkan Database Dari Hosting | Kalau kemarin telah saya share <a href="http://www.bocahit.com/2013/06/cara-valid-upload-website-ke-hosting.html" target="_blank">upload website dari localhost ke 000webhost</a> kemudian <a href="http://www.bocahit.com/2013/07/cara-upload-website-dari-localhost-ke.html" target="_blank">upload di idhostinger</a>. kali ini, bagaimana cara mengatur script yang menghubungkan database.<br /><br /><h3>Script Awal ( Dari Localhost)...</h3><pre><?PHP<br /><br />$koneksi=mysql_connect("localhost","root","bocahit");<br /><br />//untuk membuat koneksi ke server<br /><br />//mysql_connect("localhost","user","password")<br /><br />if($koneksi){<br /><br />    echo" ";<br /><br />}else{<br /><br />    echo"Cek Database!!";<br /><br />}<br /> <br /> ?></pre><br />Masalahnya tahukah kita jika kita sewaktu membuat akun <b>MYSQL, </b>ternyata kita sudah di beri user, dan password. Contohnya adalah di 000webhost. Setelah kita membuat akun MYSQL, akan muncul informasi seperti gambar di bawah ini..<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-sFBpEzTct68qCzcTfzNP3p3ij5msM5iZcybkVvE2ByXiiFdlqmp59-eqqYjL2Q__6EnBux8LOFVLsWbHfS4_eXiLpdTbENcf3H2LUDtpEV8aSICndTS3m1QT3s4LT7MTdp9x_en3t-dw/s320/info2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatur Script Menghubungkan Database Dari Hosting" border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-sFBpEzTct68qCzcTfzNP3p3ij5msM5iZcybkVvE2ByXiiFdlqmp59-eqqYjL2Q__6EnBux8LOFVLsWbHfS4_eXiLpdTbENcf3H2LUDtpEV8aSICndTS3m1QT3s4LT7MTdp9x_en3t-dw/s400/info2.PNG" title="Cara Mengatur Script Menghubungkan Database Dari Hosting" width="400" /></a></div><br />Maaf saya, tutupi. Tapi sama sekali bukan jadi masalah, yang terpenting anda catat informasi tersebut.<br />Kemudian, lihat baik script php awal (dari localhost) saya sebut dari localhost karena waktu itu kita gunakan di localhost.<br /><br /><pre>$koneksi=mysql_connect("<b><span style="color: blue;">localhost</span></b>","<b><span style="color: red;">root</span></b>","<b><span style="color: yellow;">bocahit</span></b>");<br /><br />//untuk membuat koneksi ke server<br /><br />//mysql_connect("localhost","user","password")</pre><br /> Setelah semua tercatat :<br /><br />Ganti <span style="color: blue;">warna biru</span> dengan<b> $mysql_host</b> anda misal : <b><i><u>mysql9.000webhost.com</u></i></b><br />Ganti <span style="color: red;">warna merah</span> dengan <b>$mysql_user</b> anda misal : <u><i><b>a1093615_herlambang</b></i></u><br />Ganti <span style="color: yellow;">warna kuning</span> dengan <b>$mysql_password</b> anda.<br /><br />Yups, sudah berkurang, error phpnya...<br /><br /><h3>Mengatur nama database</h3>Agar nama database dari localhost tersingkron, kita perlu ubah beberapa saja. Jika anda memberi nama database dengan "mahasiswa" maka di hosting tidak mengenalnya karena dari hosting akan disamakan atau sesuai dengan MYSQL yang kita buat, jadi kita ubah nama database (mahasiswa) dengan nama database yang kita di Akun MYSQL misal <span style="color: lime;"><i><b>$mysql_database="a1092678_mahasiswa"</b></i></span>.

Cara Mengatur Script Menghubungkan Database Dari Hosting

Cara Mengatur Script Menghubungkan Database Dari Hosting | Kalau kemarin telah saya share upload website dari localhost ke 000webhost kemud...

Baca selengkapnya »

Cara Memblokir Pop Up Di Mozilla Firefox Update

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbh6KOYBGatV05HK4ChP3eB2xiHpJliqW9lUhJ2Gx3beAAC7LWIP3pNF1Qo87-lbFE4OU8Pzsptw0Iu8U3SEtIWb2DPJ7jZCyOxHVaHZ7QBir1lWMronKLB9Xab-MI4SmB3rPepZTIuJ2/s1600/Blocked+Pop+Up.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memblokir Pop Up Di Mozilla Firefox Update" border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbh6KOYBGatV05HK4ChP3eB2xiHpJliqW9lUhJ2Gx3beAAC7LWIP3pNF1Qo87-lbFE4OU8Pzsptw0Iu8U3SEtIWb2DPJ7jZCyOxHVaHZ7QBir1lWMronKLB9Xab-MI4SmB3rPepZTIuJ2/s320/Blocked+Pop+Up.jpg" title="Cara Memblokir Pop Up Di Mozilla Firefox Update" width="320" /></a></div><br />Cara Memblokir Pop Up Di Mozilla Firefox Update | Maaf nih, buat para blogger yang suka dengan iklan pop up atau memakai referral dari Pop Ads. Bukan bermaksud melawan tapi hanya sekedar bercerita dan memberi tips.<br /><br />Pop Up memang menjamin dan sering dipakai sebagai ajang pencarian upah para <i>blogger</i> dari klik asal - asal pengunjung. Penting bagi yang mengutamakan uang tapi sangat tidak penting bagi yang mengutamakan kenyaman pengunjung.<br /><br />Nah, lalu bagaimana dengan pengunjung ? semua pasti tahu, pop up akan menambah berat <i>blog</i>, tidak perlu saya cerita tentang dampak dari berat <i>blog</i>. Admin tidak salah, dan visitor juga bener. Karena itu browser telah menyediakan tools dan add-on mengatasi pop up.<br /><br /><br /><h3>ADD ON <a href="http://www.bocahit.com/2012/09/cara-mudah-mengetahui-infomasi-seo-blog.html" target="_blank">Mozilla Firefox</a></h3>Download, <a href="https://addons.mozilla.org/en-us/firefox/addon/adblock-plus-pop-up-addon/">https://addons.mozilla.org/en-us/firefox/addon/adblock-plus-pop-up-addon/</a> kemudian install, terakhir restart browser.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWiqWQvRlnsGIoOmnZTvO5_Llx2H25ULLpfdCF2h4-HjDBM3QM7xZEXKYpv-hZ74sjFlFaQCR7R5N5F29xVhyphenhyphenNZbhLskO7aOcZ2rlRoBRfkKnvroE5SAEOhbsavi3YJJev9YCRfcMuMgaD/s1600/42554.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memblokir Pop Up Di Mozilla Firefox Update" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWiqWQvRlnsGIoOmnZTvO5_Llx2H25ULLpfdCF2h4-HjDBM3QM7xZEXKYpv-hZ74sjFlFaQCR7R5N5F29xVhyphenhyphenNZbhLskO7aOcZ2rlRoBRfkKnvroE5SAEOhbsavi3YJJev9YCRfcMuMgaD/s320/42554.png" title="Cara Memblokir Pop Up Di Mozilla Firefox Update" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixAqAUGNOyySrPUisV2P-2LdzkUtH9H_gdSeEqECkz6v3AoKXNaT2Mmmp8lbiVJ-gu_Ng9AswDZs-_-DTej7yAfC0n7FsOxJ8qTdcVX6xpeUOReuo_wHdWWxhYXedmdwtZ9-inPu1nZoWZ/s1600/56715.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memblokir Pop Up Di Mozilla Firefox Update" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixAqAUGNOyySrPUisV2P-2LdzkUtH9H_gdSeEqECkz6v3AoKXNaT2Mmmp8lbiVJ-gu_Ng9AswDZs-_-DTej7yAfC0n7FsOxJ8qTdcVX6xpeUOReuo_wHdWWxhYXedmdwtZ9-inPu1nZoWZ/s320/56715.png" title="Cara Memblokir Pop Up Di Mozilla Firefox Update" width="320" /></a></div><br /><h3>Tools Mozilla</h3>Anda juga bisa menggunakan tools dari browser.<br /><ol><li>Pilih Option...</li><li>Klik Tabs</li><li>Centang Block pop-up windows</li></ol><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihkrO_sdJxR3gyGafvUjoxT5MeF__4KmHaS9rJ2yjuJM3M4sCFYH_ki7XTsTd5q_trtpMSXIrCPFN_7OADjhm-4n1CFs-URc9cTwX13TeulmV613NvnlPQNHXVA8TQA7ChEglq732nyptX/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memblokir Pop Up Di Mozilla Firefox Update" border="0" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihkrO_sdJxR3gyGafvUjoxT5MeF__4KmHaS9rJ2yjuJM3M4sCFYH_ki7XTsTd5q_trtpMSXIrCPFN_7OADjhm-4n1CFs-URc9cTwX13TeulmV613NvnlPQNHXVA8TQA7ChEglq732nyptX/s320/Capture.PNG" title="Cara Memblokir Pop Up Di Mozilla Firefox Update" width="320" /></a></div><br />Nah, sederhana sekali dan mudah. Sampai jumpa lagi...

Cara Memblokir Pop Up Di Mozilla Firefox Update

Cara Memblokir Pop Up Di Mozilla Firefox Update | Maaf nih, buat para blogger yang suka dengan iklan pop up atau memakai referral dari Pop A...

Baca selengkapnya »

Selamat Hari Raya Idul Fitri 1434 Mohon Maaf Lahir Dan Batin

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL9s_GHEPraTmmKllm5cxiuNKox_kpRecisQnouVnKHwDnsKJo3BIgA2puu0Ncez8fLOA_PQbCVA3OepB0Zw-kNb7AOnkyLcCK2CxbnLEMNhGefz8xMj5TZHF5Fu14F5Q9ibOyZmmjnPpL/s1600/Ucapan-Selamat-Idul-Fitri-1434H-17.jpg" imageanchor="1"><img alt="Selamat Hari Raya Idul Fitri 1434 Mohon Maaf Lahir Dan Batin" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL9s_GHEPraTmmKllm5cxiuNKox_kpRecisQnouVnKHwDnsKJo3BIgA2puu0Ncez8fLOA_PQbCVA3OepB0Zw-kNb7AOnkyLcCK2CxbnLEMNhGefz8xMj5TZHF5Fu14F5Q9ibOyZmmjnPpL/s320/Ucapan-Selamat-Idul-Fitri-1434H-17.jpg" title="Selamat Hari Raya Idul Fitri 1434 Mohon Maaf Lahir Dan Batin" /></a></div><br />Selamat Hari Raya Idul Fitri 1434 Mohon Maaf Lahir Dan Batin | Seumur - umur baru kali ini, saya mengucapkan Selamat Hari Raya.Sebuah hal yang wajar dan bahkan memang hal yang di anjurkan untuk mengucapkan salam di Hari Besar Umat Islam ini.<br /><br />Jika saya atas nama Admin Wammy (Herlambang) berbuat (menulis) yang menyinggung, saya selaku admin, meminta maaf. Tidak ada maksud untuk menyinggung atau bahkan menjelek - menjelekan sesama blogger. Semoga semua blogger yang merayakan hari besar ini, diterima ibadahnya selama bulan ramadan. Aamiin..

Selamat Hari Raya Idul Fitri 1434 Mohon Maaf Lahir Dan Batin

Selamat Hari Raya Idul Fitri 1434 Mohon Maaf Lahir Dan Batin | Seumur - umur baru kali ini, saya mengucapkan Selamat Hari Raya.Sebuah hal ya...

Baca selengkapnya »

Membuat Mega Menu Dengan CSS

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihq8mpJwOFAgH7Qj_oR8ir_kyZ0hQtd6lwOY55mQVcBJqm6SJmFjEfnc6vbrVp_6n9tLujQADE9wjbnzewezwVYc_BX6z3AR1lY1dJ1AsrU-U-vNgnp1DcIm2Y2U1EF0qa2G9r4KPkSkP/s1600/Mega+Menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Mega Menu Dengan CSS" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihq8mpJwOFAgH7Qj_oR8ir_kyZ0hQtd6lwOY55mQVcBJqm6SJmFjEfnc6vbrVp_6n9tLujQADE9wjbnzewezwVYc_BX6z3AR1lY1dJ1AsrU-U-vNgnp1DcIm2Y2U1EF0qa2G9r4KPkSkP/s320/Mega+Menu.jpg" title="Membuat Mega Menu Dengan CSS" width="320" /></a></div><br />Membuat Mega Menu Dengan CSS | Sebelum lebaran, aku share dulu tutorial CSS dan HTML yang bisa anda pakai ketika membuat Mega Menu. Apa itu Mega Menu? yang jelas bukan seperti menu - menu yang biasa kita lihat. Mega Menu bisa kita artikan dengan jenis menu yang bisa mencangkup banyak indek atau sub. Jarang sekali ada blog yang menggunakan jenis menu ini. Kesuali website official arsenal, mereka memakai Mega Menu.<br /><br /><h3>CSS</h3><br /><pre>.nav,<br /><br />.nav a,<br /><br />.nav ul,<br /><br />.nav li,<br /><br />.nav div,<br /><br />.nav form,<br /><br />.nav input {<br /><br /> margin: 0;<br /><br /> padding: 0;<br /><br /> border: none;<br /><br /> outline: none;<br /><br />}<br /><br /><br /><br />.nav a { text-decoration: none; }<br /><br /><br /><br />.nav li { list-style: none; }<br /><br />.nav {<br /><br /> display: inline-block;<br /><br /> position: relative;<br /><br /> cursor: default;<br /><br /> z-index: 500;<br /><br />}<br /><br />.nav > li {<br /><br /> display: block;<br /><br /> float: left;<br /><br />}<br /><br />.nav > li > a {<br /><br /> position: relative;<br /><br /> display: block;<br /><br /> z-index: 510;<br /><br /> height: 54px;<br /><br /> padding: 0 20px;<br /><br /> line-height: 54px;<br /><br /><br /><br /> font-family: Helvetica, Arial, sans-serif;<br /><br /> font-weight: bold;<br /><br /> font-size: 13px;<br /><br /> color: #fcfcfc;<br /><br /> text-shadow: 0 0 1px rgba(0,0,0,.35);<br /><br /><br /><br /> background: #372f2b;<br /><br /> border-left: 1px solid #4b4441;<br /><br /> border-right: 1px solid #312a27;<br /><br /><br /><br /> -webkit-transition: all .3s ease;<br /><br /> -moz-transition: all .3s ease;<br /><br /> -o-transition: all .3s ease;<br /><br /> -ms-transition: all .3s ease;<br /><br /> transition: all .3s ease;<br /><br />}<br /><br />.nav > li:hover > a { background: #4b4441; }<br /><br /><br /><br />.nav > li:first-child > a {<br /><br /> border-radius: 3px 0 0 3px;<br /><br /> border-left: none;<br /><br />}<br /><br />.nav > li.nav-search > form {<br /><br /> position: relative;<br /><br /> width: inherit;<br /><br /> height: 54px;<br /><br /> z-index: 510;<br /><br /> border-left: 1px solid #4b4441;}<br /><br /> <br /><br />.nav > li.nav-search input[type="text"] {<br /><br /> display: block;<br /><br /> float: left;<br /><br /> width: 1px;<br /><br /> height: 24px;<br /><br /> padding: 15px 0;<br /><br /> line-height: 24px;<br /><br /><br /><br /> font-family: Helvetica, Arial, sans-serif;<br /><br /> font-weight: bold;<br /><br /> font-size: 13px;<br /><br /> color: #999999;<br /><br /> text-shadow: 0 0 1px rgba(0,0,0,.35);<br /><br /><br /><br /> background: #372f2b;<br /><br /><br /><br /> -webkit-transition: all .3s ease 1s;<br /><br /> -moz-transition: all .3s ease 1s;<br /><br /> -o-transition: all .3s ease 1s;<br /><br /> -ms-transition: all .3s ease 1s;<br /><br /> transition: all .3s ease 1s;<br /><br />}<br /><br /><br /><br />.nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; }<br /><br /><br /><br />.nav > li.nav-search input[type="text"]:focus,<br /><br />.nav > li.nav-search:hover input[type="text"] {<br /><br /> width: 110px;<br /><br /> padding: 15px 20px;<br /><br /><br /><br /> -webkit-transition: all .3s ease .1s;<br /><br /> -moz-transition: all .3s ease .1s;<br /><br /> -o-transition: all .3s ease .1s;<br /><br /> -ms-transition: all .3s ease .1s;<br /><br /> transition: all .3s ease .1s;<br /><br />}<br /><br />.nav > li.nav-search input[type="submit"] {<br /><br /> display: block;<br /><br /> float: left;<br /><br /> width: 20px;<br /><br /> height: 54px;<br /><br /> padding: 0 25px;<br /><br /> cursor: pointer;<br /><br /> background: #372f2b url(http://s23.postimg.org/mvvsc11ev/search_icon.png) no-repeat center center;<br /><br /> border-radius: 0 3px 3px 0;<br /><br /> -webkit-transition: all .3s ease;<br /><br /> -moz-transition: all .3s ease;<br /><br /> -o-transition: all .3s ease;<br /><br /> -ms-transition: all .3s ease;<br /><br /> transition: all .3s ease;<br /><br />}<br /><br />.nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; }<br /><br />.nav > li > div {<br /><br /> position: absolute;<br /><br /> display: block;<br /><br /> width: 100%;<br /><br /> top: 50px;<br /><br /> left: 0;<br /><br /> opacity: 0;<br /><br /> visibility: hidden;<br /><br /> overflow: hidden;<br /><br /> background: #ffffff;<br /><br /> border-radius: 0 0 3px 3px;<br /><br /> -webkit-transition: all .3s ease .15s;<br /><br /> -moz-transition: all .3s ease .15s;<br /><br /> -o-transition: all .3s ease .15s;<br /><br /> -ms-transition: all .3s ease .15s;<br /><br /> transition: all .3s ease .15s;<br /><br />}<br /><br />.nav > li:hover > div {<br /><br /> opacity: 1;<br /><br /> visibility: visible;<br /><br /> overflow: visible;<br /><br />}<br /><br />.nav .nav-column {<br /><br /> float: left;<br /><br /> width: 20%;<br /><br /> padding: 2.5%;<br /><br />}<br /><br />.nav .nav-column h3 {<br /><br /> margin: 20px 0 10px 0;<br /><br /> line-height: 18px;<br /><br /> font-family: Helvetica, Arial, sans-serif;<br /><br /> font-weight: bold;<br /><br /> font-size: 14px;<br /><br /> color: #372f2b;<br /><br /> text-transform: uppercase;<br /><br />}<br /><br />.nav .nav-column h3.orange { color: #ff722b; }<br /><br />.nav .nav-column li a {<br /><br /> display: block;<br /><br /> line-height: 26px;<br /><br /> font-family: Helvetica, Arial, sans-serif;<br /><br /> font-weight: bold;<br /><br /> font-size: 13px;<br /> color: #888888;<br />}<br />.nav .nav-column li a:hover { color: #666666; }<br /></pre><br /><h3>HTML</h3><pre><ul class="nav"><br /> <li><br /> <a href="#">What's new</a><br /> <div><br /> <!--Mega Menu--><br /> </div><br /> </li><br /> <li><a href="#">Top rated</a></li><br /> <li><br /> <a href="#">Earnings</a><br /> <div><br /> <!--Mega Menu--><br /> </div><br /> </li><br /> <li><a href="#">Rings</a></li><br /> <li><a href="#">Bracelets</a></li><br /> <li><a href="#">All Categories</a></li><br /> <li class="nav-search"><br /> <form action="#"><br /> <input type="text" placeholder="Search..."><br /> <input type="submit" value=""><br /> </form><br /> </li><br /></ul><br /></pre><br /><h3>Mega Dropdown Menu</h3><pre><div class="nav-column"><br /> <h3>Home</h3><br /> <ul><br /> <li><a href="#">Pampers Diapers</a></li><br /> <li><a href="#">Huggies Diapers</a></li><br /> <li><a href="#">Seventh Generation</a></li><br /> <li><a href="#">Diapers</a></li><br /> <li><a href="#">Derbies</a></li><br /> <li><a href="#">Driving shoes</a></li><br /> <li><a href="#">Espadrilles</a></li><br /> <li><a href="#">Loafers</a></li><br /> </ul><br /></div><br /> <br /><div class="nav-column"><br /> <h3>Home</h3><br /> <ul><br /> <li><a href="#">Driving shoes</a></li><br /> <li><a href="#">Espadrilles</a></li><br /> <li><a href="#">Loafers</a></li><br /> </ul><br /> <br /> <h3>Home</h3><br /> <ul><br /> <li><a href="#">Driving shoes</a></li><br /> <li><a href="#">Espadrilles</a></li><br /> <li><a href="#">Loafers</a></li><br /> </ul><br /></div><br /> <br /><div class="nav-column"><br /> <h3>Home</h3><br /> <ul><br /> <li><a href="#">Pampers Diapers</a></li><br /> <li><a href="#">Huggies Diapers</a></li><br /> <li><a href="#">Seventh Generation</a></li><br /> <li><a href="#">Diapers</a></li><br /> <li><a href="#">Derbies</a></li><br /> <li><a href="#">Driving shoes</a></li><br /> <li><a href="#">Espadrilles</a></li><br /> <li><a href="#">Loafers</a></li><br /> </ul><br /></div><br /> <br /><div class="nav-column"><br /> <h3 class="orange">Related Categories</h3><br /> <ul><br /> <li><a href="#">Pampers Diapers</a></li><br /> <li><a href="#">Huggies Diapers</a></li><br /> <li><a href="#">Diapers</a></li><br /> </ul><br /> <br /> <h3 class="orange">Brands</h3><br /> <ul><br /> <li><a href="#">Driving shoes</a></li><br /> <li><a href="#">Espadrilles</a></li><br /> </ul><br /></div><br /></pre><br /><br />Isikan HTML Mega Dropdown Menu pada <!--Mega Menu-->. Selesai..<br /><span style="font-size: x-small;">Sumber:designmodo</span> <br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/07/ul.html" target="_blank">Ilustrasi</a> </div><!--Mega Menu-->

Membuat Mega Menu Dengan CSS

Membuat Mega Menu Dengan CSS | Sebelum lebaran, aku share dulu tutorial CSS dan HTML yang bisa anda pakai ketika membuat Mega Menu. Apa itu ...

Baca selengkapnya »