Cara Mudah Menambahkan Nomor di Komentar Blog

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

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/AVvXsEjd6DKhwEsyM-hul2OIVxeSOEfOzsZv6oKBXjQL-dglhz18n4U74CCl3kp1IyrZavWFypN0ODYWpGFI4GAMHmC8fIiWZy6cbO9uFalaXEgqv6j099csytKDXuTUtZPGpFSV_d_l1GuNJk3x/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.

Informasi Link Download yang Error !!!

Informasi Link Download yang Error !!! Mohon maaf buat rekan-rekan yang sudah berkunjung ke blog saya ini dan menemukan link DOWNLOAD yang ERROR / NOT WORK. 

Kemaren ketika saya buka account Mediafire ternyata Account saya kena Suspend permanent. Dan mayoritas File yang saya uplload saya taruh di Host tersebut.

Mohon maaf atas ketidak nyamanan ini, secepatnya akan segera diganti linknya.

Thanks.

Effand Bocah Nozh.

Membuat Bingkai Border dengan CSS

Tutorial Membuat Bingkai Border dengan CSS - Bingkai dengan CSS di blogspot ini menggunakan fungsi border-corner yang ada dalam CSS. Bingkai Border ini didalamnya bisa kita isi text maupun Foto, anda tinggal mengisi dengan tulisan atau dengan URL Image anda. Sesuaikan dengan kebutuhan saja.

Membuat Bingkai Border dengan CSS bisa kalian lihat contoh imagenya dibawah ini :

Membuat Bingkai Border dengan CSS

Seperti itulah contohnya dari Membuat Bingkai Border dengan CSS 

DEMO :

TEXT silahkan Anda disini, silahkan anda isi misalnya "Membuat Bingkai Border dengan CSS" atau yang lain juga bisa. Bisa dijadikan modifikasi untuk template blog kamu, tinggal gimana kamu mengkreasikan ini. Membuat Bingkai Border dengan CSS ada 4 kertas dipojok yang digunakan untuk mengapit pigora ini, seperti ditempeli dengan Kertas.

1. HTML

<div class="tucked-corners top-corners">
    <span class="tucked-corners bottom-corners">
             Textmu atau Url Image    </span>
</div>

2. CSS

div.tucked-corners {
    background: #f6f6f6;
    height: 380px;
    margin: 50px auto;
    padding: 10px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
    background: #999;
font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    color:#FFF;
    display: block;
    height: 380px;
    position: relative;
    width: 580px;
    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}
/* Top Corner Effect */
.top-corners:after,
.top-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    z-index: 10;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.top-corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
/* Bottom Corner Effect */
.bottom-corners:after,
.bottom-corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    bottom: -25px;
    width: 100px;
    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
    left: -50px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
         -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
.bottom-corners:before {
    right: -50px;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

Oke sekian dulu cara membuat Bingkai dengan CSS, tunggu tutorial selanjutnya.

Salam Blogger Donomulyo.

Membuat Slider Otomatis Dengan JQuery

Membuat Slider Otomatis Dengan JQuery - Cara membuat Slider otomatis menggunakan Jquery ini bisa anda manfaatkan untuk mempercantik Blog Anda. Slider Otomatis dengan J-Query dibawah ini mungkin cukup agag semrawut demonya, yang bisa anda lihat dibawah.

Berikut ini contoh Membuat Slider Otomatis Dengan JQuery:

Oke anda sudah melihat contohnya, jika anda tertarik silahkan ikuti caranya di bawah ini.

1. HTML

<div id="gallery">
    <a href="#" class="show">    <img src="images/flowing-rock.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element
    inside the REL attribute."/></a>
    </a>
    <a href="#">        <img src="images/grass-blades.jpg" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>description"/>
    </a>
     ......    ......
    ......
   <div class="caption"><div class="content"></div></div>/div>
<div class="clear"></div>

2. CSS

#gallery {
    position:relative;
    height:360px
}
    #gallery a {
        float:left;
        position:absolute;
    }
   
    #gallery a img {
        border:none;
    }
   
    #gallery a.show {
        z-index:500
    }

    #gallery .caption {
        z-index:600;
        background-color:#000;
        color:#ffffff;
        height:100px;
        width:100%;
        position:absolute;
        bottom:0;
    }

    #gallery .caption .content {
        margin:5px
    }
   
    #gallery .caption .content h3 {
        margin:0;
        padding:0;
        color:#1DCCEF;
    }

 3. Javascript

$(document).ready(function() {    
   
    //Execute the slideShow
    slideShow();

});

function slideShow() {

    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});
   
    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.0});
   
    //Set the caption background to semi-transparent
    $('#gallery .caption').css({opacity: 0.7});

    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
   
    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);
   
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',6000);
   
}

function gallery() {
   
    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
   
    //Get next image caption
    var caption = next.find('img').attr('rel');
   
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
   
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
   
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
   
    //Display the content
    $('#gallery .content').html(caption);
       
}

 Selesai, tutorial Membuat Slider Otomatis Dengan JQuery silahkan Anda coba semoga berhasil. ^_^

Membuat Update Comment Blog Berjalan

Tutorial Membuat Update Comment Blogspot Berjalan - Comment Pada Blog yang Berjalan Otomatis ini adalah lanjutan tutorial blog sebelumnya, kali ini kita akan mencoba membuat Update Comment Blog Berjalan pada blog. Ketika kita melihat blog kita maka biasanya kita akan juga melihat commentar dari blog sahabat kita atau penugnjung yang kebetulan main-main ke blog kita.

Cara Membuat Update Comment Blog Berjalan ini memanfaatkan javascript sehingga bisa dengan mudah anda masukkan kedalam blog tanpa harus mengubah script dalam di blog anda.

Untuk cara Membuat Update Comment Blog Berjalan silahkan anda ikuti langkah berikut ini.

1. Silahkan anda Log in ke account Blog anda.
2. Masuk kedalam Edit Tata Letak
3. Add gadget/widget dimana anda ingin menampilkan Update Comment Blog Berjalan ini.
4. Copy script berikut ini

<marquee align="center" direction="down" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2">
<script src="http://buternaker.googlecode.com/files/comment-slide.js">
</script>
<script>
var numcomments = 15;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://aregnoz.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments">
</script>
</marquee>

  5. Ganti tulisan warna Merah dengan Alamat Blog Anda.

Langkah terakhir silahkan save. Demikian langkah-langkah Membuat Update Comment Blog Berjalan.
Selamat mencoba.

Cara Menghilangkan Index Archive di google

Cara Menghilangkan Index Archive digoogle

Cara Menghilangkan Index Archive di google ~ Index Archive di Google Tampil dan tak jarang kita tag menyadarinya. Banyak pakar SEO menyarankan untuk menonaktifkan index Archive ini. Karena dirasa memang kurang efektif. Saya sendiri belum tahu benar untuk kejelasannya tapi yang jelas memang benar-benar tidak efektif ketika kita men search di google yang keluar malah Archive kita bukan menuju ke Artikel yang kita maksut.

Disini ada sedikit cara untuk Menghilangkan Index Archive digoogle, ini merupakan referensi dari beberapa blog master Luar Negeri yang menurut saya sudah Mastahnya di dunia Blogging.


Jika kamu ingin menggunakannya juga berikut ini caranya.

1. Silahkan kamu masuk blog ke Edit HTML

2. Taruh Script dibawah ini di bawah Meta Tag kamu yang biasanya berada di bawah <head>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "index"'>
    <link href='http://alamatblogmu.blogspot.com/' rel='canonical'/>
  </b:if>
  <b:if cond='data:blog.pageType == "archive"'>
    <link href='http://almatblogmu.blogspot.com/' rel='canonical'/>
  </b:if>
</b:if>

3. Ganti Tulisan warna kuning diatas dengan alamat blogmu.
4. Simpan Template blogmu.

Silahkan lakukan eksperimen untuk anda analisa efek dari pemasangan script diatas.

Membuat Efek Round Image dengan CSS

Membuat Efek Round Image CSS

Tutorial Membuat Efek Round Image Di Blog - Membuat efek melingkar dipojok gambar. Kali ini saya akan share tutorial untuk membuat image yang akan mempunyai efek round pada Image atau sekeliling image akan seperti ada lingkaran yang mengelilingi image dan di beri efek hover. Langsung anda coba cara berikut ini.

Sehingga ketika image didekati oleh Cursor maka otomatis image akan mempunyai efek round dan ada warna hovernya.

Berikut ini cara membuat Membuat Efek Round Image Di Blog

Berikut ini adalah script yang harus anda gunakan :

1. Buka Blog anda

2. Silahkan masuk pada edit html

3. Kemudian cari kode berikut ini ]]></b:skin>

4. Jika sudah ketemu silahkan anda copy code dibawah ini.

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Keterangan :

- Opacity adalah tingkat transparansi dari efek round image

- Border adalah warna border image, silahkan anda seuaikan kode warnanya

NB : jangan lupa save dulu template anda.

5. Langkah terakhir adalah save template anda. 

Oke sekian tutorial Membuat Efek Round Image dengan CSS malam ini, and good nite guys ..

Cara Mudah Pasang Alexa Di Blog

Cara Pasang Alexa Di Blog

Tutorial Cara Mudah Pasang Alexa Di Blog - Tidak dapat dipungkiri Alexa adalah merupakan hampir hal wajib ada di deretan gadget blog kita, Cara Pasang Alexa Di Blog mungkin bagi para master sudah sangat mudah untuk memasang widget ini tanpa harus mikir sulit untuk sekedar memasang Alexa ini.

Khusus untuk newbi, silahkan ikuti langkah Cara Pasang Alexa Di Blog berikut ini.

1. Masuk Alexa dot Com, Disini

2. Pilih Site Tools

3. Pilih Alexa Site Widget, scrool kebawah

4. Setelah tampil, masukkan Alamat blog kamu di textbox terserah mau yang di atas atau dibawah, kemudian build Widget.

5. Kemudian Copy link nya di Add Gadget dan pilih html/javascript

6. Simpan.

Sekian tutorial dari aregnoz tentang Cara Pasang Alexa Di Blog.

Semoga mendapatkan rank yang baik.

NB : Semakin kecil nilai dari Rank Alexa Semakin Baik Pagerank Blog Anda

Tutorial Make Tooltip Otomatis In Blogspot

Tutorial Make Tooltip Otomatis In Blogspot

Tutorial Make Tooltip Otomatis In Blogspot ~ Tooltip berjalan otomatis diblog yang mempunyai link baik link text maupun gambar. Tutorial ini saya tidak tahu persis siapa yang mempunyai awalnya karena ketika diketik dengan kata kunci tersebut sudah bejibun yang tampil dan semua nya sama.

Tutorial Make Tooltip Otomatis In Blogspot jadi saya disini hanya sekedar share juga dan pengingat untuk jika sewaktu-waktu saya butuh juga.

Caranya untuk membuat tooltip Otomatis.

Taruh script berikut dibawah <body>

<script src='http://javascript-share.googlecode.com/files/wb.js'/>
<a href='http://www.warungbebas.com' id='wb_ttauth'/><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting = {func : "Tooltip", top : 5, left : 5,maxw : 300,speed : 20, timer : 40, endalpha : 95, alpha : 0, style_plus : "#tt{border:0} #ttcont{background:#000;color:#fff}"};  /*silahkan dimodif*///]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/> <script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/>
<div id='warungbebasautotooltip'>

Kemudian Taruh diatas </body>

</div><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script> 

Oke simpan template anda.