Panjz Online : blogger | Informasi online dan catatan harian

Asem Banget Tuh Orang

Posted by Panjz mackenzie Posted on Kamis, Agustus 15, 2013 with 9 comments

Malam-malam gini enaknya jalan di Google,namun pa yang saya lihat wah bener-bener ajib,
Gimana tidak, Template hasil modif-an saya ada yang jual, cuman Rp.30.000,-
Asem banget tuh orang.. (kompi template juga di jual :D parah tuh orang)

alamat: http://www.mitrabo.kaffah.biz/produk/-/panjz_template

Hari Kemerdekaan Indonesia

Posted by Panjz mackenzie Posted on Rabu, Agustus 14, 2013 with 2 comments

Setelah menjalankan ibadah shaum(puasa) sebulan penuh,dan merayakan hari besar Idul Fitri serta melaksanakan kegiatan mudik ria..akhirnya saya bisa kembali membuka blog jelek ini.hihihhii :D

kredit photo by: digital painting indonesia bhineka poster by anggarock101/kaskus

Dalam rangka memperingati Hari Kemerdekaan Republik Indonesia yang ke-68, ga kerasa ya, udah 68 tahun negara kita merdeka, tp masih banyak permasalahan yg belum terselesaikan.hmm( tanya kenapa??)
Namun,apakah hari kemerdekaan itu bisa dirasakan oleh seluruh rakyat ndonesia?

Kalau sedikit kita mengingat masa lalu dimana para pejuang berani mempertaruhkan nyawanya hanya untuk membela negara Indonesia agar terbebas dari segala penjajahan. Keterpurukan Indonesia saat itu sangatlah memprihatinkan, atau sekilas kita melihat film dilayar televisi yang diulang kembali sekedar mengingatkan kepada masayarakat Indonesia tentang para pejuang yang tengah membela bangsa itu tidaklah mudah.
Tetapi tidak semua hal yang diinginkan negara Indonesia dapat terwujud, karena selain dari berbagai bencana yang melanda negeri ini, munkin kalau bencana alam dapat kita pahami karena itu semua faktor dari alam itu sendiri,tapi kalau bencana lingkungan itu karena dampak dari manusia
manusia yang tidak bisa selaras dengan lingkungan yang harus kita jaga dan lestarikan. Selain itu juga bangsa ini merasa rapuh karena akibat dari sebuah dosa besar yang bernama korupsi dan menjadi budaya.
Ditambah lagi pemuda harapan bangsa yang menghancurkan harapan itu sendiri karena terhasut akan segala tindakan yang tidak sesuai dengan norma dan susila. Bom-bom yang meledak yang dilakukan anak bangsa yang sama sekali tidak tahu apa yang sebenarnya mereka lakukan hanya mengikuti perintah yang sama sekali tidak di anjurkan oleh agama apapun dan tidak bertanggung jawab yang menghancurkan karakteristik bangsa Indonesia dimata dunia. :d
Meskipun banyak hal yang membuat kemerdekaan Indonesia ternodai oleh hal yang tidak terpuji, tapi jangan sampai kehilangan makna kemerdekaan itu sendiri karena makna kemerdekaan adalah merupakan awal terwujudnya mimpi membangun Negara Kesatuan Republik Indonesia untuk kesejahteraan rakyat. Menjaga keamanan seluruh warga dalam lindungan Allah SWT dan sistem hukumyang adil dan kokoh.Yang lebih penting lagi adalah keseriusan serta keberanian dalam menempuh jalan pembangunan yang akan berdampak luas dan positif bagi bangsa Indonesia.

Renungan makna Hari Kemerdekaan ini semoga menjadi berkah untuk Bangsa Indonesia dan mengisinya dengan sesuatu yang bermanfaat baik untuk diri sendiri, keluarga, atau lingkungan sekitar dan tentunya untuk bangsa ini. Ciptakanlah kreatifitas generasi bangsa yang mandiri, teguh, dan bijaksana.

Merdeka ... Merdeka !!

cara membuat kotak About Me atau Profile Blog

Posted by Panjz mackenzie Posted on Minggu, Juli 21, 2013 with 8 comments

Kali ini saya mau membagikan cara membuat kotak About Me ,atau profile Blog yang simple dan mudah-mudahn anda suka

DEMO

Jika anda menyukainya silakan copy kode di bawah ini.

.Pertama Letakan Font-Awesome di bawah kode <head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

. HTML

<div id="hulu">
<div id="social">
<div id="left_social"><i class="icon-facebook"></i>
<i class="icon-twitter"></i></div>
<div id="right_social"><i class="icon-google-plus"></i>
<i class="icon-pinterest"></i>
</div> </div>
<div id="profile-pic">
<div class="cover">
</div>
<div id="prof"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmbO-z2qboui57UJ5U8n2m4uYueLTQvO_UM2WOZE2v_otTN66NAB9et2Ph2NP6NDMZsbyAYn4YPRvouOzPL5RWoJpgulUNOCoJ-GVf6IZYAq_edEutuQuRuwH49ZRDIhln-uKTE__Tyk/w165-h166-no/It%2527s+me.jpg"/>
</div> </div>
<div id="details">
<h1><span>Panjz Mackenzie</span></h1>
</div>
<div id="info">
<ul>
<li><div class="link"><a href="#">About Me</a></div>
</li> <li><div class="link"><a href="#">My Skills</a></div>
</li> <li><div class="link"><a href="#">Work Experience</a></div>
</li> <li><div class="link"><a href="#">Say Hello!</a></div>
</li> </ul>
</div> </div>

.CCS

#hulu{
width:300px;
height:auto;
margin:0 auto;
background:#000;
position:relative;
border-radius:0px 0px 20px 20px;
background:#f8f8f8;
padding:0px 0px 20px 0px;
-moz-box-shadow: inset 0 0 10px #E3E3E3;
-webkit-box-shadow: inset 0 0 10px #E3E3E3;
box-shadow: inset 0 0 10px #E3E3E3;
}
#social{
padding:10px 20px;
overflow:auto;
background:#9a2418;
border-bottom:2px solid #9a2418;
position:relative;
}
#left_social{float:left;}
#right_social{float:right;}
#social i{
margin-right:0px;
padding:5px 0px;
width:30px;
display:block;
float:left;
text-align:center;
color:#fff;
font-size:1.2em;
transition:0.5s ease;
-webkit-transition:0.5s ease;
}
#social i:hover
{
background:#fff;
color:rgb(223, 97, 19);
transition:0.5s ease;
-webkit-transition:0.5s ease;
border-radius:50%;
}
img{
width:85px;
height:auto;
border-radius:50%;
margin:7px;
z-index:100;
position:relative;
}
#prof{
width: 100%;
height: 100%;
border-radius: 50% 50% 50% 50%;
border: 2px solid #6B2F0A;
background:#9a2418;
}
.cover{
position: absolute;
width: 104px;
height: 49px;
top: 0px;
left: 0px;
z-index: 1;background:#9a2418;
}
#profile-pic
{
margin: -51px auto 0px;
position: relative;
z-index: 100;
width: 100px;
height: 100px;
}
h1{
font-family:&amp;quot;Roboto Slab&amp;quot;;
margin:0px; padding:10px 0px;
text-align:center;
font-size:1.3em;
}
#info ul{margin:0px; padding:0px;list-style-type:none;-webkit-backface-visibility: hidden; backface-visibility: hidden;}
#info li{margin:0px;text-align:center;font-family:&amp;quot;Roboto Slab&amp;quot;;font-size:1.2em;}
#info li a{display:block;color:#000;text-decoration:none;padding:15px 0px;-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;}
#info li div:hover a{background:#9a2418;color:#fff;-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,-10px);
-ms-transform:translate(0px,-10px);
-o-transform:translate(0px,10px);
transform:translate(0px,-10px);text-shadow: 2px 2px 3px #000;}

Lihat pratinjau dan jika sudah merasa pas save template anda..selesai
semoga bermanfaat

sumber kode: http://codepen.io/berdejitendra/details/vopFJ

Membuat Search Box keren

Posted by Panjz mackenzie Posted on Kamis, Juli 18, 2013 with 5 comments

Kotak pencarian ini membuat saya pingin berbagi,karen buat saya kotak pencarian ini enak di lihat :d
dan mungkin juga anda akan menyukainya,

DEMO

Bagai mana? anda tertarik.jika ya..silakan copy code yang ada di bawah ini :

Letakan Font-Awesome di bawah kode <head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

HTML

<div class="search"> <input class="search_box" type="checkbox" id="search_box"> <label class="icon-search" for="search_box"></label> <div class="search_form"> <form action="#"> <input type="text"><input type="submit" value="search"> </form> </div> </div>

Ket: Ganti tanda "#" dengan URL blog anda

CCS

body{
margin:10px;
text-align:center;
}
.search{
position:relative;
display: inline-block;
}
[class^=&amp;amp;quot;icon-&amp;amp;quot;]{
background: #3498db;
color:#fff;
border-radius:5px;
display:inline-block;
padding:6px 7px 7px;
font-size:18px;
text-shadow:1px 1px 2px #21638F;
box-shadow: inset 0px 0px 0px #21638F;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
cursor: pointer;
z-index:10;
position:relative;
}
[class^=&amp;amp;quot;icon-&amp;amp;quot;]:hover{
background: #5dade2;
text-shadow:0px 0px 0px #21638F;
box-shadow: inset 0px 0px 8px #21638F;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
.search_form{
background: #5dade2;
position:absolute;
z-index:0;
padding:0px 5px;
right:0;
top:15px;
overflow: hidden;
border-radius:10px;
width: 20px;
height:0px;
transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
-webkit-transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
}
.search_form form{
opacity:0;
transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
}
.search_form input{
background:#fff;
border:none;
}
.search_form input[type=&amp;amp;#39;text&amp;amp;#39;]{
border-radius:5px 0 0 5px;
width:150px;
margin:0px 1px 0px 0;
padding:0px 5px 1px;
min-height:23px;
}
.search_form input[type=&amp;amp;#39;submit&amp;amp;#39;]{
border-radius:0 5px 5px 0;
text-transform:uppercase;
font-size:11px;
padding:0px 5px;
min-height:24px;
margin:0px 0px 0px 0;
cursor: pointer;
}
.search_box{
visibility: hidden;
}
.search_box:checked~.search_form{
width: 213px;
height:24px;
padding:5px;
top:35px;
transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
-webkit-transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
}
.search_box:checked~.search_form form{
opacity:1;
transition:0.3s all ease-out 0.5s;
-webkit-transition:0.3s all ease-out 0.5s;
}

Semoga bermanfaat
Sumber kode: http://codepen.io/MakhonkoDenis

Membuat Menu Endah Pireusepeun

Posted by Panjz mackenzie Posted on Selasa, April 30, 2013 with 13 comments

Jujur saja,saya kadang tidak mengerti dengan istilah kode di blog, yang kadang juga saya harus menghafal beberapa istilah.heheh, maklum saja saya belajar dengan otodidak, sempat ada beberapa komentar yang meminta bantuan "bagaimana memasang bla..bla..bla..." yang bikin saya pusing,heheheh dan harus mecari arti itu di google search..wakaakkaka...parah ga tuh.
Tapi saya tidak merasa minder dengan para master yang begitu pinter meracik kode-kode di blog hingga menciptakan hal yang sangat bermanfaat di blog.Tapi,yang membuat saya minder adalah saya tidak ingin belajar dan tidak ingin tahu.
Disini saya bukan menulis tentang tutorial atau semacamnya, saya hanya ingin memberi tahu cara membuat menu ( apa yah namanya...) dari pada saya bingung menu ini saya berinama menurut versi saya adalah menu-endah-pireusepeun ..seperti tampak gambar di bawah

DEMO

Terserah saya mo aneh kek..heheh (padahal gak tahu nama menu ini.)
kalau kata saya sih,menu ini cocoknya buat blog yang berisi konten berita atau semacamnya..tapi terserah juga sih,,heheh

Pertama salin kode CCS di bawah ini

a#home{display:block;width:27px;background-image:#fff;background-position:0 0;float:left;margin:0px 0px 0 0}
a#home:hover{background:#0000;} #panjz{height:30px;background:#fff;border:1px solid #aaa}
#panjz .container{width:100%;height:30px;margin:0 auto}
ul#topnav{float:left;width:850px;list-style:none;position:relative;font-size:1.1em;margin:0;padding:1px 0 0} ul#topnav li{float:left;border-right:1px solid #555;margin:0;padding:0}
ul#topnav li a{font-size:12px;font-weight:700;text-transform:none;color:#626262;display:block;text-decoration:none;padding:5px 13px}
ul#topnav li:hover{background:#aaa}
ul#topnav li span{float:left;margin-top:3px;position:absolute;left:0px;top:29px;display:none;width:930px;margin:0 auto;background:#aaa;color:#000;-moz-border-radius-bottomright:5px;-khtml-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomleft:5px;-khtml-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;padding:7px 0 7px 20px} .active{background:#e9e9e9;display:block}
ul#topnav li:hover span{display:block;z-index:100}
ul#topnav li span a{display:inline}
ul#topnav li span a:hover{text-decoration:none;background:#e9e9e9;padding:5px 15px}

kmudiaan salin kode HTML atau kerangka objek di bawah ini, terserah anda mau di letakkan dimna.

<div id='wrap2'>
<div id='panjz'>
<div class='container'>
<ul id='topnav'>
<li class='active'><a href='/' id='home'>home</a></li>
<li><a href='/'>Wilayah</a>
<span>
<a href='#'>Bogor Barat </a>
<a href='#'>Bogor Timur</a>
<a href='#'>Bogor Tengah</a>
<a href='#'>Bogor Utara</a>
<a href='#'>Bogor Selatan</a>
</span>
</li>
<li><a href='/'>Wisata</a>
<span>
<a href='#'>Kebun raya</a>
<a href='#'>Taman Topi</a>
<a href='#'>Setu Gede</a>
<a href='#'>Puncak</a>
<a href='#'>Istana Bogor</a>
</span>
</li>
<li><a href='/'>Kuliner</a>
<span>
<a href='#'>menu1</a>
<a href='#'>menu2</a>
<a href='#'>menu3</a>
<a href='#'>menu4</a>
<a href='#'>menu5</a>
</span>
</li>
<li><a href='/'>Hiburan</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='/teknologi'>Teknologi</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='/warta-bumi'>Info kita</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='/artikel'>Artikel</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='#' target='_blank'>Otomotif</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='/foto'>Foto</a></li>
<li><a href='/video'>Video</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
</ul>
</div></div>

disini mungkin anda sudah tahu mana yang harus di edit jadi saya tidak perlu perlu panjang lebar menjelaskannya. sebelum di save,lihat pratinjau,jika dirasa sudah pas save template anda

jika ada yang kurang jelas ,bertanyalah... :D

semoga bermanfaat.

Asem Banget Tuh Orang

Hari Kemerdekaan Indonesia

cara membuat kotak About Me atau Profile Blog

Membuat Search Box keren

Membuat Menu Endah Pireusepeun

Terakhir Diperbaharui

Popular Posts