fatin shidqia lubis

Tuesday, May 15, 2012

Cara Membuat Auto Readmore Dengan Style CSS Animasi

Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Auto Readmore Dengan Style CSS Animasi,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Auto Readmore Dengan Style CSS Animasi.

Caranya :

1. Login Ke Akun Blogger Sobat

2. Masuk Ke Bagian Edit HTML

3. Lalu Pastekan Kode Dibawah ini Diatas kode ]]></b:skin>

.lingkaranwrapper {
padding-right: 30px;
padding-top: 10px;
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}
.lingkaran {
background-color: #ECEBFA;
border:5px solid #746EBB;
opacity:.9;
border-right:5px solid #ffffff;
border-left:5px solid #ffffff;
border-radius:50px;
box-shadow: 0 0 35px #000000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.lingkaran1 {
background-color: #ecebfa;
border:5px solid #746EBB;
opacity:.9;
border-left:5px solid #2E2A69;
border-right:5px solid #2E2A69;
border-radius:50px;
box-shadow: 0 0 15px #000000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.lingkaran2 {
background-color: transparent;
border: 5px solid #453D9B;
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #000000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2E2A69;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #746EBB;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

4. Jika Sudah Lalu Cari Script Dibawah (yang mirip/sama) :

<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read More....</a></span>

5. Lalu Ganti Semua Script Diatas Dengan Script Pemanggil Dibawah Ini :

<div class='lingkaranwrapper'>
<div class='lingkaran'/>
<div class='lingkaran1'/>
<div class='lingkaran2'>
<a expr:href='data:post.url'>Read More</a>
</div></div>

6. Jika Sudah Save Template Dan Liat Readmorenya :D

Selamat Mencoba ^_^

Jika Ada Yang Tidak Di Mengerti Sama Sobat Monggo Silahkan Comment Di Bawah Dan Kami Akan Membantu Sobat-Sobat Sekalian !^_^ dan Selamat Mencoba !

Sunday, May 13, 2012

Cara Membuat Ribbon Menu Horizontal Dengan Style CSS

Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Ribbon Menu Horizontal Dengan Style CSS,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Ribbon Menu Horizontal Dengan Style CSS.

Caranya :

1. Yang Paling Penting Login Akun Blogger Sobat

2. Masuk Ke Bagian Edit HTML

3. Cari Kode <body> Jika Sudah Ketemu Masukan Script HTML Dibawah Tepat Di Bawahnya :

<div class='menu'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>

Ganti tanda pagar # dengan url link kamu

4. Jika Sudah Simpan Script CSS Dibawah Tepat Diatas ]]></b:skin>

.menu:after, .menu:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid rgba(0, 159, 234, 0.3 );}
.menu:after {
border-right-color:transparent;}
.menu:before {
border-left-color:transparent;
}
.menu a:link, .menu a:visited {
color:#fff;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;}
.menu span {
background:rgba(0, 159, 234, 0.3 );
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s;
-moz-transition: background, margin 0.2s;
-o-transition: background-color, margin-top 0.2s;
transition: background, margin 0.2s;
}
.menu a:hover span {
background:rgba(0, 159, 234, 0.5 );
margin-top:0;
}
.menu span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );
}
.menu span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );}

5. Jika Sudah Save Template .

Saturday, May 12, 2012

Cara Membuat Show/Hide Kotak Komentar Dengan Style CSS

Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Show/Hide Kotak Komentar Dengan Style CSS,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Show/Hide Kotak Komentar Dengan Style CSS.

Caranya :

1. Login Ke Akun Blogger Sobat
2. Masuk Kebagian Edit HTML Terus Centang Expand Widget Template
3. Cara Kode ]]></b:skin> Jika Sudah Ketemu Copas Script Dibawah Tepat Di Atasnya!

#comments {display : none;}.tombol-komentar a{text-align: center;}.stylewadah {background: #CCC;padding: 5px;}

4. Cari Lagi Kode </head> Dan Pastekan Script Dibawah Ini Tepat Diatasnya !

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){ $(".tombol-komentar").click(function(){ $("#comments").slideToggle("slow"); $(this).toggleClass("active"); return false; });});</script>

5. Cari Lagi Kode <b:includable id='comments' var='post'> Jika Tidak Ketemu Cari Yang Mirip ! Dibawahnya Kita Pasang Script :

<center><div class='stylewadah'><a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No Comments be the first<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if></a></div></center>

6. Terakhir Simpan Template ! Dan Check Kotak Komentarnya ^_^

Selesai Sudah Tutorial Dari TB4all Tentang Cara Membuat Show/Hide Kotak Komentar , Terima Kasih Sudah Berkunjung dan Membaca Artikel Kami , Jika Ada Yang Tidak Di Mengerti Bertanyalah Dari Pada Kesesat Di Tengah Jalan ^_^ , Dan Selamat Mencoba :D

Cara Membuat Menu Horizontal Dengan Style CSS dan Effect Cursor Crosshair

Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Menu Horizontal Dengan Style CSS,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Menu Horizontal Dengan Style CSS.

Caranya :

1. Masuk Ke Akun Blogger Sobat

2. Pergi Ke Bagian Edit HTML

3. Dari Kode :

/* Header
-----------------------------------------------
*/

4. Simpan Kode Dibawah Ini Tepat Di Bawah Kode Yang Tadi Dicari

#pilihan {
width: auto;
height: 58px;
background-color: #242424;
background-attachment: scroll;
border: 5px outset #FFF;
cursor: crosshair;
}
#pilihan #resep {
height: 20px;
width: auto;
font-family: "Comic Sans MS", cursive;
font-size: 16px;
font-variant: normal;
text-transform: none;
color: #FFF;
font-style: normal;
line-height: normal;
text-decoration: none;
position: absolute;
float: left;
text-align: center;
padding-left: 200px;
}
#pilihan #resep a {
display: block;
float: left;
padding: 15px;
color: #FFF;
text-decoration: none;
}
#pilihan #resep a:hover {
color: #FFF;
text-decoration: none;
background-color: #F90;
border-right-width: 5px;
border-bottom-width: 5px;
border-top-width: 5px;
border-left-width: 5px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-top-width: #FFF;
border-left-color: #FFF;
cursor: crosshair;
}

5. Lalu Cari Kode <body> dan Simpan Script CSS Atau Bisa di Bilang Script Pemanggil Dibawah Tepat Bawah Kode <body>

<div id="pilihan">
<div id="resep">
<a href="#"> Home</a>
<a href="#">Contact Us</a>
<a href="#">About Us</a>
<a href="#">Link Exchange</a>
<a href="#">Guest Book</a>
<a href="#">Daftar Isi</a>
</div>
</div>

6. Jika Sudah Save dan Lihat Yang Terjadi ^_^

Selesai Sudah Tutorial Dari TB4all Tentang Cara Membuat Menu Horizontal Dengan Style CSS, Terima Kasih Sudah Berkunjung Dan Membaca Artikel Dari Kami ^_^

Ket. Jika Ingin Mengganti Effect Cursornya Cari Aja Kode cursor: crosshair; Lalu Ganti Dengan Effect Cursor Yang Sobat Inginkan

Wednesday, May 9, 2012

Cara Mengubah Favicon Blog

Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Mengubah Favicon Blog,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Mengubah Favicon Blog.

Caranya :

1. Login Ke Akun Blogger Sobat

2. Masuk Ke Bagian Layout

3. Lalu Disana Sobat Akan Melihat Ada Gambar :

4. Lalu Klik Tulisan Edit > Chose File.
5. Jika Sudah Memasukan Iconnya Save, dan Lihat Apa Yang Terjadi ^_^.

Sekian dan Terimakasih Wassalamu'alaikum Wr,Wb

Jika Ada Yang Tidak Di Mengerti Sama Sobat Monggo Silahkan Comment Di Bawah Dan Kami Akan Membantu Sobat-Sobat Sekalian !^_^ dan Selamat Mencoba !

How to make Popular Post Box By Moving The Slider

Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Tutorial Yang Berbeda Tapi Kali Ini Kami Akan Mencoba Dengan Bahasa Inggris Eheheheh ... So Soan Inggris .. Yaitu How to make Popular Post Box By Moving The Slider. Kita Langsung Saja Ke Tutorialnya Ok :D.

Here's how:

1. Login to Blogger account buddy.
2. Go To The Design
3. Then Create a New Gadget.
4. Then Put It Into Script Under New Gadgets Made Earlier!

<style>
* {
 margin: 0;
 padding: 0;
}

body {
    font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 800px;
    margin: 60px auto;
}

#intro {
    padding-bottom: 10px;
}

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
 border: 10px solid #ccc;
}

.scroll {
 overflow: hidden;
 width: 800px;
    margin: 0 auto;
    position: relative;
}

.scrollContainer {
 position: relative;
}

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
 height: 318px;
}

#left-shadow {
 position: absolute;
 top: 0;
 left: 0;
 width: 12px;
 bottom: 0;
 background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}

#right-shadow {
 position: absolute;
 top: 0;
 right: 0;
 width: 12px;
 bottom: 0;
 background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}

.inside {
 padding: 10px;
 border: 1px solid #999;
}

.inside img {
 display: block;
 border: 1px solid #666;
 margin: 0 0 10px 0;
 width: 250px;
}

.inside h2 {
 font-weight: normal;
 color: #111;
 font-size: 16px;
 margin: 0 0 8px 0;
}

.inside p {
 font-size: 11px;
 color: #ccc;
}

a {
 color: #999;
 text-decoration: none;
 border-bottom: 1px dotted #ccc;
}

a:hover {
 border-bottom: 1px solid #999;
}

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -45px;
}

.scrollButtons.right {
    right: -45px;
}

.hide {
    display: none;
}

</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

5. Then the Save Template Buddy and see what happens: D\
6. If you have already jQuery in your Template please delete from my script

Thank You It's Been and Read Article We, Hopefully Helpful and Good luck ^ _ ^

Haduh Kayaknya Bahasa Inggrisnya Gk Nyambung egheehe Sobalnya Pake Google Translate ^_^ Piss

Translate To English With : Google Translate

Monday, May 7, 2012

Ayo Check PageRank Sobat-Sobat Sekalian !

Ayo Check PageRank WebSite Sobat Sekalian Gk Ribet Tinggal Masukin URL WebSite Sobat Sekalian !

Check Page Rank of your Web site pages instantly:

Ayo Check PageRank WebSite Sobat !

Selamat Mencoba ! ^_^

fatin shidqia lubis

Tuesday, May 15, 2012

Cara Membuat Auto Readmore Dengan Style CSS Animasi

Sunday, May 13, 2012

Cara Membuat Ribbon Menu Horizontal Dengan Style CSS

Saturday, May 12, 2012

Cara Membuat Show/Hide Kotak Komentar Dengan Style CSS

Cara Membuat Menu Horizontal Dengan Style CSS dan Effect Cursor Crosshair

Wednesday, May 9, 2012

Cara Mengubah Favicon Blog

How to make Popular Post Box By Moving The Slider

Monday, May 7, 2012

Ayo Check PageRank Sobat-Sobat Sekalian !

Sponsors

Blog Archive