Tuesday, January 29, 2013

Cara Mudah Menambahkan Nomor di Komentar Blog

Posted by dav On 12:34 AM
Tutorial Cara Menambahkan Nomor di Komentar Blogspot - Cara lama yang mungkin beberapa orang belum tahu, yaitu menambahkan Nomor pada Komentar Pengunjung Blog. Cara ini digunakan di beberapa Blog yang saya rasa cukup bagus juga untuk diterapkan.
Cara Menambahkan Nomor di Komentar Blog
Cara Menambahkan Nomor di Komentar Blog
Anda bisa lihat script berikut dan silahkan di copy jika berminat :
  1. Cari script ]]></b:skin>
  2. Kopi Kode Berikut Sob, diatas no.1 tadi.
.comment-thread ol {
 counter-reset: countcomments;
}
.comment-thread li:before {
 content: counter(countcomments,decimal);
 counter-increment: countcomments;
 float: right;
 font-size: 22px;
 color: #555555;
 padding-left: 10px;
 padding-top: 3px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-MN8eZoAzn2VdzGqxiRgd9lMSD0LuwVzYQbm9-cA4EgZ_xLvtjYGR79Tx97d3Uo9uDBa-KAEI8IaslVkTRwQEZ_Adn1z34-ry6prEXl2xX6s02aKiTEsLl-wOSNCX747mY3esNO3cvbLr/s1600/comment+bubble2.png) no-repeat;
 margin-top: 7px;
 margin-left: 10px;
 width: 50px;
 /*image-width size*/
 height: 48px;
 /*image-height size*/
}
.comment-thread ol ol {
 counter-reset: contrebasse;
}
.comment-thread li li:before {
 content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
 counter-increment: contrebasse;
 float: right;
 font-size: 18px;
 color: #666666;
}    
Oke demikian Cara Mudah Menambahkan Nomor di Komentar Blog, kemudian Save Template ente, semoga berhasil.

Tuesday, January 15, 2013

18 Situs Editing CSS CSS3 dengan Cepat

Posted by dav On 8:10 AM
18 Situs Editing CSS CSS3 dengan Cepat - Situs untuk menunjang Edit Blog dengan CSS dan CSS 3 dengan cepat. Kalian akan sangat dibantu jika menggunakan web atau situs-situs berikut ini. Mulai dari membuat button hover, menu, css gradien, transition dan masih banyak lagi tool untuk memodifikasi blog kita dengan CSS tentunya.

Lanjut Bos, berikut ini daftar ke 18 Blog Situs Editing CSS-CSS3 dengan Cepat.

CSS Table Generator
18 Situs Editing CSS CSS3 dengan Cepat
  1. CSS Table Generator
  2. CSS3 Generator
  3. Ultimate CSS Gradient Generator
  4. CSS Border Radius
  5. CSS Box Shadow
  6. CSS Generators
  7. CSS3 Button Generator
  8. HTML Tabble Style Generator
  9. CSS Button Maker
  10. CSS3 Generator
  11. CSS3 Transforms
  12. CSS3 Button Generator
  13. CSS3 Gradiente Generator
  14. CSS3 Playground
  15. CSS Menu Builder
  16. Creative CSS3 Animation Menus
  17. CSS3 Generator-Webtutorials
  18. CSS Menu Maker
18 Situs Editing CSS CSS3 dengan Cepat


Oke, semoga link-link diatas dapat membantu Anda memaksimalkan Blog kesayangan Anda. Selamat Mencoba dan semoga lancar-lancar sadja, heee.

Monday, January 14, 2013

Cara Mudah Membuat Scrool di Komentar

Posted by dav On 3:21 PM
Cara Mudah Membuat Scrool di Komentar - Cara Paling Mudah membuat Scrool kotak di komentar blog. Related Post adalah sebuah list artikel lainnya yang bisa dibaca oleh pengunjung blog ketika sudah membaca satu artikel, biasanya berada dibawah postingan. Related post ini biasanya diset untuk menemukan artikel sejenis dari label yang di buat oleh admin blog. berikut ini tips Cara Mudah Membuat Scrool di Komentar. 
Cara Mudah Membuat Scrool di Komentar
Cara Mudah Membuat Scrool di Komentar
Pertama silahkan Login ke blog Anda kemudian masuklah ke Edit HTML.
Setelahnya silahkan Centang Expand Widget
Ketiga tekan ctrl+f kemudian ketik <data:post.body/>, jika ada 2 pilih saja yang atas.
Setelah itu Copykan script Scrool Komentar ini di Atas cara ketiga tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rscr'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
Untuk tulisan yang berwarna merah bisa Anda sesuaikan.

Langkah berikutnya ini adalah menempatkan code CSS, cari ]]></b:skin> lalu copy script berikut diatas code tersebut.
.rscr{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rscr:hover{background-color: rgb(255, 255, 255);}
Setelahnya silahkan Save template Anda.


Wednesday, January 2, 2013

Membuat Log in dan Sig up dengan CSS dan J-Query - Cara membuat Simple Effective Drop Down Log in dan Sign Up dengan CSS dan Jquery. Anda dapat melihat gambarannya seperti gambar dibawah ini. Anda dapat mengkombinasikan dengan PHP misalkan untuk proyek Website Anda.

Membuat Log in dan Sig up dengan CSS dan J-Query
Membuat Log in dan Sign up dengan CSS dan J-Query
Tampilan yang dihasilkan nantinya adalah seperti diatas, anda dapat melihatnya dengan mengklik gambar karena saya tidak membuatkan untuk demonya.

Membuat Log in dan Sig up dengan CSS dan J-Query
Analogi dari proyek membuat drop Log  in
Oke lanjut untuk script dalam membuat Log in dan Sig up dengan CSS dan J-Query sebagai berikut :

HTML
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Your email address" required>
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div>                  
</li>
<li id="signup">
<a href="">Sign up FREE</a>
</li>
</ul>
</nav>
CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;  
}
nav li {
  float: left;        
}
nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff;
}
nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}
nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  background: #fff;
}
nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;  
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee);
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}
nav li #login-content {
  right: 0;
  width: 250px;
}
/*--------------------*/
#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
  margin: 10px 0 0 0;
}
#login #submit {   background-color: #d14545;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
  background-image: -moz-linear-gradient(top, #e97171, #d14545);
  background-image: -ms-linear-gradient(top, #e97171, #d14545);
  background-image: -o-linear-gradient(top, #e97171, #d14545);
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;  
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}
#login #submit:hover,
#login #submit:focus {   background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {   outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; }
#login #submit::-moz-focus-inner {
  border: none;
}
#login label {
  float: right;
  line-height: 30px;
}
#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}
J-Query
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active'); if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
else $(this).find('span').html('&#x25BC;')
})
});
Oke, selesai dan selamat mencobanya.
thanks TRD for sharing about this tutorial.

Follow my blog with Bloglovin