Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Blog Dengan Design Frontpage Ala Website

postingan kali ini bertajuk tentang pembuatan front page blog seperti sebuah website. pernahkah sobat kunjungi sebuah web site dan pada front page nya hanya terdapat menu dan content berada pada salah satu menu. ini adalah konsep pembuatan website yg ringan. nah saya pernah mencobanya pada blog saya namun tidak saya pakai lagi karena blog lebih enak di liat langsung ke content "2 d point" tp jika sobat berminat saya akan share sedikit cara pembuatan blog ala website 

 step 1 :
jika sobat ahli dalam membaca html maka akan terbagi 2 page pada template seperti keterangan di bawah


<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- (untuk halaman frontpage) -->

<b:else/>

<!-- (untuk halaman blog) -->
 
</b:if> 
 
step 2 :

nah sekarang kita urai menjadi 2 bagian seperti keterangan di atas . 
letakkan kode berikut di bawah <body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- (kode HTML untuk halaman frontpage) -->

<b:else/> 
 
 
 kemudian masukan pula ini diatas </body> :

</b:if> 
 
 
 step 3 :
 
Untuk menambahkan widget, masukan kode berikut  (diatas <b:else/>) :

<div id='frontpage-wrapper'>
<b:section class='frontpage' id='frontpage'/>
</div> 
 
 jika sudah di save maka di page elemen anda akan ada tulisan 
"ADD NEW WIDGET/TAMBAHKAN WIDGET BARU""
 
 
step 4 :
 
kode CSS nya sobat buat style baru seperti berikut simpan diatas </head>:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

/* kode cssnya di sini bro  */

</b:if>
</style>
 

step 5 : anda perhatikan kode merah di atas disana anda isi html dengan format

<div id='frontpage'>
<h1><a href='/'><data:blog.title/></a></h1>
<ul class='nav'>
<li><a href='/'>Home</a><span class='special-character'>/</span></li>
<li><a href='/'>Category</a><span class='special-character'>/</span></li>
<li><a href='/atom.xml'>RSS</a><span class='special-character'>/</span></li>

</ul><!-- end nav -->
<div class='clear'>LongField</div>
 
<div id='terbaru'>
<b:section class='terbaru' id='terbaru1'>
<b:widget id='Feed1' locked='false' title='Recent Post' type='Feed'/>
</b:section>
</div>
<p>LongField
</p>
</div>
 
 yg berwarna kuning bisa anda kreasikan sesuai dengan yg anda inginkan
contohnya dengan menu JQuery atau semacamnya 
tp jangan lupa sebelumnya anda sesuaikan dengan CSS yg anda style warna hijau

Membuat Screensaver Blog Dengan Kreasi Sendiri

trik ini mgkn sudah banyak yg tw tp ane sekedar share bwt tmn2 blogger yg blom tw hehe.... mksd jdul diatas adalah membuat modus hemat energy pada blog. jika blog kita dibiarkan beberapa detik maka akan mncul screen saver. itu sudah biasa namun kta bisa memeri sedikit kreasi pada penggunaan scriptnya. contohnya pada blog saya.. saya memberikan animas gif pada screensaver tersebut. coba anda biarkan blog saya selama 20 detik maka akan muncul animasi screensaver. biasanya pada sebuah blog hanya muncul screensaver gelap biasa. tp saya memodifikasi sedikit sehingga pada layar ada gambar animasi gif... di bawah ini adalah scriptnya . perhatikan kode berwarna pink.  kode sesudahnya adalah gambar yg saya taruh pada javascript screensaver sehingga muncul gambar . sobat blogger bisa mengubah gambar tersebut pada kode "http://gambar anda.gif"
setelah iu anda simpan di notepad dengan format screensaver.js . dan kemudian sobat upload di http://code.google.com jika sobat punya akun code.google. jika tidak sobat bisa buat account di sini



var idleTime = 0; var standby = false; function CheckInactivity() { idleTime += 10; if(idleTime > 20) { InitializeStandBy(); } } function InitializeStandBy() { if(!standby) { var h = 0; h = jQuery(window).height(); jQuery("#energysaving").show().css({ height: "0", width: "0", left: "50%", top: "50%" }).animate({ width: "100%", height: h, left: "0", top: "0", opacity: "1" }, 1000); standby = true; } } function StopStandBy() { if(standby) { jQuery("#energysaving").animate({ width: "0", height: "0", opacity: "0", left: "50%", top: "50%" }, 500); setTimeout('jQuery("#energysaving").hide();', 800); standby = false; } } document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">'); if(typeof(jQuery) == "undefined") { document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>'); } function InitJQuery() { if(typeof(jQuery) == "undefined") { setTimeout("InitJQuery();", 50); } else { jQuery(function() { jQuery(document).ready(function() { setInterval("CheckInactivity();", 10000); jQuery(this).mousemove(function(e) { idleTime = 0; StopStandBy(); }); jQuery(document).keypress(function(e) { idleTime = 0; StopStandBy(); }); jQuery("body").append('<div id="energysaving"><img src="http://www.lmm.jussieu.fr/~neukirch/work-images/spaghetti/animation_10.gif"></img><p><<---------------------LONGFIELD--------------------->><br /><span>bumi bisa panas komputerpun juga.. tp kalo jaringan internet apa bisa panas juga yaa????? .</span></p><div id="copyrightOnlineLeaf">Copyright 2011 <font style="color: #666666;">www.longfield.co.nr</font> - All reservedkopi panas 2010</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

"http://www.onlineleaf.com/savetheenvironment.css" pada kode di atas juga bisa di modifikasi. saya pernah mengunjungi beberapa blog dan melihat beliau menambahkan css3 sehingga menimbulkan efek khusus. kode ini sobat bisa juga memodifikasi sendiri. dan langkah terakhir stelah sobat mengupload javascript di atas maka buat format seperti di bawah ini



<script src="http://http://longfield21.googlecode.com/files/screensaver.js">
</script>


dan kode setelah src=" sampai tanda kutip terakhir sobat ganti dengan javascript yg telah sobat upload dan letakkan di atas </body>

simpan dan liat hasilnya

Pasang Exchange Link Dengan Efek Jquery


DEMO : __________________________
                                                                   |
/_________________________________|
\                                          |
                                           |
                                           |
                                           |
                                           |
                                           |
                                          \|/






mw widget seperti di atas?? berikut tutorialnya :




pertama anda mendaftar dulu di sini 

setelah mendaftar  :

masuk ke bagian wizard dan setelah itu pilih untuk blogger dan pilih di bawahnya Original Auto-Linkies


lalu terakhir copas kode di bawah ini sebelumnya masuk blogger - rancangan - tambah widget - html/javascript

<center><b>yang mw linknya masuk di bawah ini mari ceng cengan</b></center>
<style type="text/css">
#tag-cloud {

    width: 600px;

    height: 400px;

    border: 2px solid black;

    margin: 20px auto;

    overflow: hidden;

    position: relative;

    background: #111 url(http://kmwlrs.com/images/Grey%20Gradient%20GIF.gif) center center repeat;

    border-radius: 20px;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    box-shadow:1px 1px 12px #000;

    -moz-box-shadow:1px 1px 12px #000;

    -webkit-box-shadow:1px 1px 12px #000;

    -o-transition: all 2s ease-in-out;

    -moz-transition: all 2s ease-in-out;

    -webkit-transition: all 2s ease-in-out;

        list-style: none;  

    }

#tag-cloud:hover {

    -o-transform: scale(1.1) rotate(0deg) translate(0px);

    -moz-transform: scale(1.1) rotate(0deg) translate(0px);

    -webkit-transform: scale(1.1) rotate(0deg) translate(0px);

    opacity: 1.0;

    background: black url(http://www.filehive.com/files/081007/3-seungyeon.jpg);

    border-color: red;

    box-shadow:1px 4px 18px #000;

    -moz-box-shadow:1px 4px 18px #000;

    -webkit-box-shadow:1px 4px 18px #000;          

    }

#tag-cloud li {list-style: none;}  
</style>  

<style type="text/css">
a.white { color: #fff;}

a.green { color: #00FF99;}

a.yellow { color: #FFFF99;}

a.blue { color: #02ddfe;}

a.gray { color: #CCCCCC;}

a.orange { color: #FFCC99;}

a.lime { color: #FF99FF;}

a.red { color: #fd3a31;}

a.white, a.green, a.yellow, a.blue, a.gray, a.orange, a.lime, a.red {

    text-decoration:none;

    padding:3px 8px;

    opacity: 0.8;

    filter: alpha(opacity=80);

    font-family: Times New Roman;

    font-weight: normal;

    text-shadow: 0 1px 1px #000;

    -o-transition: all 1s ease-in-out;

    -moz-transition: all 1s ease-in-out;

    -webkit-transition: all 1s ease-in-out;  

    }

a.white:hover, a.green:hover, a.yellow:hover, a.blue:hover, a.gray:hover, a.orange:hover, a.lime:hover, a.red:hover {

    background-color:#777;

    opacity: 1.0;

    filter: alpha(opacity=100);

    border-radius: 15px;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    text-shadow: 0 1px 1px #000;

    box-shadow:1px 1px 15px #fff;

    -moz-box-shadow:1px 1px 15px #fff;

    -webkit-box-shadow:1px 1px 15px #fff;

    -o-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -webkit-transform: scale(1.2);  

    color:#990000;

    border: 2px solid #999;

    }

/*#tag-cloud { position:relative; top:10px; left:10px; height:300px; width:400px; border:1px solid red; overflow:hidden; margin-bottom:40px;}*/

#tag-cloud1 { position:relative; top:10px; left:10px; height:400px; width:500px; border:1px solid red; overflow:hidden; margin-bottom:40px;}

#tag-cloud2 { position:relative; top:10px; left:10px; height:300px; width:300px; border:1px solid red; overflow:hidden; margin-bottom:40px;}
</style>

<ul id="tag-cloud" style="list-style: none outside none;">
<li>kode script mister linky widget anda</li>
</ul>


save dan liat hasilnya selamat mencoba!!!

Pasang Exchange Link Dengan Efek Jquery


DEMO : __________________________
                                                                   |
/_________________________________|
\                                          |
                                           |
                                           |
                                           |
                                           |
                                           |
                                          \|/






mw widget seperti di atas?? berikut tutorialnya :




pertama anda mendaftar dulu di sini 

setelah mendaftar  :

masuk ke bagian wizard dan setelah itu pilih untuk blogger dan pilih di bawahnya Original Auto-Linkies


lalu terakhir copas kode di bawah ini sebelumnya masuk blogger - rancangan - tambah widget - html/javascript

<center><b>yang mw linknya masuk di bawah ini mari ceng cengan</b></center>
<style type="text/css">
#tag-cloud {

    width: 600px;

    height: 400px;

    border: 2px solid black;

    margin: 20px auto;

    overflow: hidden;

    position: relative;

    background: #111 url(http://kmwlrs.com/images/Grey%20Gradient%20GIF.gif) center center repeat;

    border-radius: 20px;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;

    box-shadow:1px 1px 12px #000;

    -moz-box-shadow:1px 1px 12px #000;

    -webkit-box-shadow:1px 1px 12px #000;

    -o-transition: all 2s ease-in-out;

    -moz-transition: all 2s ease-in-out;

    -webkit-transition: all 2s ease-in-out;

        list-style: none;  

    }

#tag-cloud:hover {

    -o-transform: scale(1.1) rotate(0deg) translate(0px);

    -moz-transform: scale(1.1) rotate(0deg) translate(0px);

    -webkit-transform: scale(1.1) rotate(0deg) translate(0px);

    opacity: 1.0;

    background: black url(http://www.filehive.com/files/081007/3-seungyeon.jpg);

    border-color: red;

    box-shadow:1px 4px 18px #000;

    -moz-box-shadow:1px 4px 18px #000;

    -webkit-box-shadow:1px 4px 18px #000;          

    }

#tag-cloud li {list-style: none;}  
</style>  

<style type="text/css">
a.white { color: #fff;}

a.green { color: #00FF99;}

a.yellow { color: #FFFF99;}

a.blue { color: #02ddfe;}

a.gray { color: #CCCCCC;}

a.orange { color: #FFCC99;}

a.lime { color: #FF99FF;}

a.red { color: #fd3a31;}

a.white, a.green, a.yellow, a.blue, a.gray, a.orange, a.lime, a.red {

    text-decoration:none;

    padding:3px 8px;

    opacity: 0.8;

    filter: alpha(opacity=80);

    font-family: Times New Roman;

    font-weight: normal;

    text-shadow: 0 1px 1px #000;

    -o-transition: all 1s ease-in-out;

    -moz-transition: all 1s ease-in-out;

    -webkit-transition: all 1s ease-in-out;  

    }

a.white:hover, a.green:hover, a.yellow:hover, a.blue:hover, a.gray:hover, a.orange:hover, a.lime:hover, a.red:hover {

    background-color:#777;

    opacity: 1.0;

    filter: alpha(opacity=100);

    border-radius: 15px;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    text-shadow: 0 1px 1px #000;

    box-shadow:1px 1px 15px #fff;

    -moz-box-shadow:1px 1px 15px #fff;

    -webkit-box-shadow:1px 1px 15px #fff;

    -o-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -webkit-transform: scale(1.2);  

    color:#990000;

    border: 2px solid #999;

    }

/*#tag-cloud { position:relative; top:10px; left:10px; height:300px; width:400px; border:1px solid red; overflow:hidden; margin-bottom:40px;}*/

#tag-cloud1 { position:relative; top:10px; left:10px; height:400px; width:500px; border:1px solid red; overflow:hidden; margin-bottom:40px;}

#tag-cloud2 { position:relative; top:10px; left:10px; height:300px; width:300px; border:1px solid red; overflow:hidden; margin-bottom:40px;}
</style>

<ul id="tag-cloud" style="list-style: none outside none;">
<li>kode script mister linky widget anda</li>
</ul>


save dan liat hasilnya selamat mencoba!!!

Animated Tag Cloud dengan JQuery & CSS3

DEMO :





mw yang seperti di atas???


langsung saja ke TKP :


step terakhir : masuk blogger - add widget - html/javascript 


masukkan kode berikut :







KLIK "SELECT ALL" UNTUK MELAKUKAN COPY PASTE






save dan liat hasilnya selamat mencoba dan jangan lupa kasi sedikit komen atau tambahan !!!

Animated Tag Cloud dengan JQuery & CSS3

DEMO :





mw yang seperti di atas???


langsung saja ke TKP :


step terakhir : masuk blogger - add widget - html/javascript 


masukkan kode berikut :







KLIK "SELECT ALL" UNTUK MELAKUKAN COPY PASTE






save dan liat hasilnya selamat mencoba dan jangan lupa kasi sedikit komen atau tambahan !!!

Membuat Menu Box Transisi Dengan JQuery

Demo : http://longfield-transitionpage.blogspot.com/
source : http://tympanus.net/Tutorials/LittleBoxesMenu/











step 1 :masukkan kode berikut di atas ]]></:b:skin>



kode image.jpg di atas anda ganti dengan url gambar yang anda inginkan
step 2 : masukkan script berikut di atas </head>





step 3 : masukkan kode berikut sebelum </body>



step 4 : masukan pada bagian body code berikut dan bisa juga di letakkan pada widget terserah anda




save dan liat hasilnya selamat mencoba dan jangan lupa kasi sedikit komen atau tambahan !!!

Membuat Menu Box Transisi Dengan JQuery

Demo : http://longfield-transitionpage.blogspot.com/
source : http://tympanus.net/Tutorials/LittleBoxesMenu/











step 1 :masukkan kode berikut di atas ]]></:b:skin>



kode image.jpg di atas anda ganti dengan url gambar yang anda inginkan
step 2 : masukkan script berikut di atas </head>





step 3 : masukkan kode berikut sebelum </body>



step 4 : masukan pada bagian body code berikut dan bisa juga di letakkan pada widget terserah anda




save dan liat hasilnya selamat mencoba dan jangan lupa kasi sedikit komen atau tambahan !!!

Membuat Togle Slide Classic dengan JQuery

seperti gambar di atas...bla bla bla ... langsung saja yang di perlukan bukan kopi dan cemilan tapi komputer dan mata... demo : klik  di sini

step 1 : letakkan kode berikut di atas ]]></b:skin>
#dropDownWrap{
height: 375px;
}
#dropDownBox {
height: 24px;
width: 140px;
margin: auto;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
border:#000 1px solid;
}
.topBlock {
background:url(images/top_box.jpg) no-repeat top left;
cursor:pointer;
padding: 5px 0 5px 5px;
width: 135px;
color:#008be3;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.dropList {
display:none;
width:138px;
background-color:#414141;
border:1px solid #000;
}
.dropList li a {
color:#008be3;
text-decoration:none;
padding:6px 10px;
display:block;
}
.dropList li a:hover {
color: #ccc;
background-color:#008be3;
}
#copyRights{
width:960px;
margin:0 auto;
text-align:center;
height:50px;
color:#0285d8;
}
#copyRights a{
color:#CCC;
text-decoration:none;
}
#copyRights a:hover{
text-decoration:underline;
}



step 2 : letakkan kode berikut di atas


<script src="http://webarchitectz.com/toggle-slide/Toggle%20Slide/js/jquery.js" type="text/javascript">
<script type="text/javascript" src="http://webarchitectz.com/toggle-slide/Toggle Slide/js/slider.js"
</script>



step 3 : letakkan kode berikut di bagian body








 
save template anda dan liat hasilnya!!!

sumber : http://webarchitectz.com/toggle-slide/Toggle%20Slide/sliding_menu.html

Membuat Togle Slide Classic dengan JQuery

seperti gambar di atas...bla bla bla ... langsung saja yang di perlukan bukan kopi dan cemilan tapi komputer dan mata... demo : klik  di sini

step 1 : letakkan kode berikut di atas ]]></b:skin>
#dropDownWrap{
height: 375px;
}
#dropDownBox {
height: 24px;
width: 140px;
margin: auto;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
border:#000 1px solid;
}
.topBlock {
background:url(images/top_box.jpg) no-repeat top left;
cursor:pointer;
padding: 5px 0 5px 5px;
width: 135px;
color:#008be3;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.dropList {
display:none;
width:138px;
background-color:#414141;
border:1px solid #000;
}
.dropList li a {
color:#008be3;
text-decoration:none;
padding:6px 10px;
display:block;
}
.dropList li a:hover {
color: #ccc;
background-color:#008be3;
}
#copyRights{
width:960px;
margin:0 auto;
text-align:center;
height:50px;
color:#0285d8;
}
#copyRights a{
color:#CCC;
text-decoration:none;
}
#copyRights a:hover{
text-decoration:underline;
}



step 2 : letakkan kode berikut di atas


<script src="http://webarchitectz.com/toggle-slide/Toggle%20Slide/js/jquery.js" type="text/javascript">
<script type="text/javascript" src="http://webarchitectz.com/toggle-slide/Toggle Slide/js/slider.js"
</script>



step 3 : letakkan kode berikut di bagian body








 
save template anda dan liat hasilnya!!!

sumber : http://webarchitectz.com/toggle-slide/Toggle%20Slide/sliding_menu.html