0 Pasang tombol replay di kotak komentar

Salah satu cara membalas komentar dengan cepat dan praktis adalah dengan memasang widget replay pada kotak komentar blog. Pada dasarnya sama saja dengan membalas komentar pada umumnya, namun cara ini lebih praktis dan cepat. Karena tombol replay to comment berada di samping ID sang pemberi komentar, jadi bisa langsung memberikan komentar. Berbeda dengan replay pada fasilitas seperti blog yang laennya yang menempatkan komentar balasan dalam satu kolom dengan komentar pertama. Untuk widget yang sekarang kita coba membuat yang simple.

Buat yang belum memasangnya, berikut ada sedikit langkah mudah untuk memasangnya di blog. Sebelum memasangnya, silahkan backup template-nya terlebih dahulu, untuk menghindari hal-hal yang tidak di inginkan.



Berikut langkah - langkah project latihan kita kali ini.
1). Silahkan login dulu ke Blogger dengan akun sobat
2). Kemudian masuk ke halaman Rancangan ==> Edit HTML lalu centang pada kotak Expand Widget Template. Lakukan Back Up terlebih dahulu pada template blog sobat, untuk jaga-jaga dari kegagalan prosesi sehingga sobat bisa langsung merestore template Blog seperti semula.
3). Selanjutnya cari dan dapatkan kode di bawah ini! (Bila susah mencarinya gunakan fasilitas search dengan menekan tombol Control+F3 pada keyboard)

<dd class='comment-footer'>

Atau
<b:include data='comment' name='commentDeleteIcon'/>

4). Klo udah ketemu, taruh kode dibawah berikut dibawah salah satu kode diatas:

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BLOGIDSOBAT&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=yes, width=400, height=450&quot;); return false;'>[Reply Comment]</a></span>

KET:: Jangan lupa ganti Kode BLOGIDSOBAT dengan BLOG ID sobat (Kode Blog ID terlihat Di Browser Internet pada saat sobat melakukan posting/ edit HTML di dasbor).Seperti contoh posisi Blog ID pada gambar di bawah ini!


Jika anda ingin mengganti kata [Reply Comment] yang muncul dalam form komentar, edit tulisan yang berwarna hijau.

5). Kalau sudah simpan template anda dan lihat hasilnya.

KET:::
Jika ingin menaruh Fitur Replaynya tepat dibagian teks body, contoh seperti punya saya, maka kode yg diatas td, harus menempatkannya dibawah kode : <span class='interaction-iframe-guide'/> . 

6). Agar lebih menarik anda juga bisa mengganti tulisan [Reply Comment] dengan icon gambar. Caranya, ganti tulisan berwarna hijau dengan <img src='url-gambar'/>

Jangan lupa ganti url-gambar dengan alamat icon gambar anda. Misal: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTX3XflQYz-RIY2QuDxK5nkMXTP7pfbMi0yfu1PMZFlaxEkgTSANDyuBXnevafb8f1Mm4RmoAgXIs8TbkgoSij6B6DeZei5Mto4-5PzLqTp9fik1QB1XFup21PWEMOVBU7zso9e3mZ9aa/s400/reply.png

Sebagai contoh, berikut saya sediakan beberapa model icon reply. Kalau tertarik, silahkan upload icon gambar tersebut ke image hosting anda atau copy saja alamat gambar icon disamping untuk menggunakannya.


 -->https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRv4zqfvKsvTen0jPhT6B5KJjdI7NXQSZMEQwSdIrtimjo0pwjdj6LV_uvvv3hsI-mPdX_DFj4scxJXt-oFrrKBWhopJ_Wb5TJezSTbnxezPePskA8wA5zIN-y9hpv6r4PBg3jpR0nsDf6/

 --> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhkhZ4LA7ScfmSLNt6sDGOUE0ezJrCRRSAlQIXCHpl8SmI6gw2n5MPuav0uOvSZPGFAsg5Eg3idgKFBdQpSIEaeZH-8KxkVa5h_XM7qoD80HH-iB0vD35S_toiHW6V-PdLOCJGJTyJB1Q2/

 --> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9w_HbmgmzRtWZglMI3Wo2fpUj196IFiSkEuVLmEwREIdqg4bYvPdNYSfHsaxVq_OWEWdxoDtUrgIMVVrLLsbAlkvnVA2kB9s3gErLdWcuz_WkWVTFIaT0MLGu3ArmU6BWaHx59J06axI/

 --> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGhkEOmN_oovUljOfc8qiAhoTKYa_dRCxD0pTzxe17SbaI1_WGzccLFUzC4yyWsPNzYq2w9OMejLWHbj6DADixJ21i0GeUMKtRfrJf2608zkgV0uswp2PolFOzrFNpWsjjRqcCGdMcoX1/

 --> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUBKyINIVMaMCA4JVbhk8W3Ne89PEMsrMzBmb6Xhyphenhyphenrff5xfcY4Yn_VKMOwM4gHB-xcAdKWoTuQ9cXUBhvHvK_02tZPDiqiaOaRoyk67_UaqphN7L4UIf2KSaBLH1FPcYsqeSUSUoYYrboT/

NB" Jika sobat ingin memasang tombol replay ditempat lain anda bisa mencari code<data:commentPostedByMsg/> Atau <data:comment.timestamp/>. dan letakkan code diatas tadi, diata kode<data:commentPostedByMsg/> Atau <data:comment.timestamp/>.

Selamat mencoba. Semoga bermanfaat.

4 Cara Pasang Widget Buku Tamu "Slide Out Effect" ( jQuery )

Membuat cbox Show/Hide pada bagian atas ini merupakan pengembangan kode dari kode-kode untuk membuat cbox Show/Hide sebelumnya, sebenarnya berawal dari Show/hide cbox pada sisi kiri atau kanan blog. Nekat adalah modal utama saya dalam hal otak-atik kode ini, karna saya bukanlah seorang yang ahli dibidang HTML ini...hehehe...
Tapi saya sangat bersyukur karena ALLAH.SWT telah memberikan sedikit kemampuan dan mengizinkan saya untuk mengolah kode ini... (*Alhamdulillah).

Sebenarnya saya buru-buru buat posting tilisan ini, tapi demi sobat-sobat blogger yang telah me-request nya, dan mungkin tak sempat buat otak-atik kode-kode sebelumnya, maka akan saya persembahkan postingan ini untuk memberikan kemudahan pada sobat dalam membuat Show/hide cbox pada posisi atas :). 

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

  
});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
height: auto;
background:#000;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKDVxOwHL3UG390wLy-uN9-N_zxx_5WCPwcSLizqKqOpreyaygU59prfb7RPiw9kiSEia4RvrKNemY7QKRSDVBRvoDoT9R-GlEqo4PHgmjRyJa3g8Bd72nHZVU-ZxM_0xZWG7TENOqTo/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsj6Lm2WfFs2WvAazvf3-3BmpTd_SuOMnne8qr0U0w29H5hxjuNqkE5Oiml2yOG6fthH06b8Ya799LPjnh9XPhWM1-ELK3MzR09fmpLXLNmn7M0PTtAEKRsvfQgX-oHcQX9wn503IG-A/s1600/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}
</style>

<div id="panel">

<!-- BEGIN CBOX -->
---------------
<!-- END CBOX -->

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

5. Save...

Note ::
- Tang berwarna merah ganti dengan kode Cbox.


Cukup sekian tutorialnya,, maaf atas segala kesalahan dan kekurangan. Saya harapkan sarannya untuk memperbaikin kesalahan dan kekurangan penulisan ini. 

0 Membuat Daftar Isi Bergaya Slider Toggle

dan sekarang ini sy akan memberikan tutorial cara 'Membuat Daftar Isi Bergaya Slider Toggle dgn Background bag.2' dimana pd postingan sy sblmnya pernah jg membahas 'Membuat Daftar Isi Bergaya Slider Toggle', sbenarnya sm sj sich, pd postingan sy sblmnya, cm artikel kali ini sdh sy tambahkan beberapa fitur, 'background' dan 'fungsi scroll', tp yg jlas ini lebih menarik dibanding yg sebelumnya,. 


gmn?? anda tertarik membuatnya.
baiklah langsung sj klw gtu.. cranya sm dgn postingan saya sblumnya koQ..!


1. Cara memasangnya dengan membuat sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )


2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat scroll 0 0#666;background-position:bottom right; border-radius:8px; text-shadow:1px 2px 1px #000;color:white; border: 2px solid white; height: 310px; overflow: auto; padding: 10px; width: auto;">
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://daily-cyber.co.cc/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script></div>

KET:::
-Ubah teks yang berwarna merah dengan dengan url blog anda.
-Sobat tinggal mengganti teks yang berwarna hijau, sesuai selera anda masing2.


3. Selanjutnya Klik Publish Post.


Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.

0 Membuat Efek Img Hover Zoom pada semua gambar Posting

Pada kesempatan kali ini Dicky ingin memberikan tutorial blogger lagi, setelah lama ngga posting tutor blogger. nah disini saya ingin memberikan 'Membuat Efek Img Hover Zoom pada semua gambar Posting' maksud.y disini Image/gambar pada saat disorot, maka akan menimbulkan efek Pembesaran pada gambar..


Trik ini murni dari efek CSS, LIHAT CONTOHNYA DISINI. perhatikan pada bagian Gambar.


Jika sobat ingin mencobanya langsung saja ikuti langkah berikut :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. cari code : .post img{ (Jika tidak ketemu maka letakkan kode berikut diatas kode ]]></b:skin> )
Lalu hapus kode diatas, lalu ganti dengan kode berikut :

.post img{border-radius: 8px; -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; opacity: 0.6; transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg); background:transparent; padding:4px}
.post img:hover { opacity: 1.0; -o-transform: rotate(0deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(0deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s;
-moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;
-webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;
}

::: Sobat dapat mengedit code CSS diatas sesuka anda,


5. Save Template,..

Sekarang lihat hasilnya.

Selamat mencoba! 

0 Cara Menambah Background di posting blog

Akhirnya saya menyempatkan diri untuk mengupdate blogger saya ini, dan berhubung ad slah teman kita yang menanyakan kepda saya, "K' cara kasih backgraund di posting gmn?? kya' punya kk' yang skrg".baiklah disini saya akan mencoba memberikan trik menambah 'Background di Posting Blog', walau sebentar ini trik yang sangat mudah.heheeg.


Baiklah tidak perlu panjang lebar, kita lansung saja ke cara pembuatannya :
seperti biasa
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. cari code : .post { (Jika tidak ketemu maka letakkan kode berikut diatas kode ]]></b:skin> )
Lalu hapus kode diatas, lalu ganti dengan kode berikut :

.post {
margin: 0px 20px 0px 0px;
height:100%;
color:#fff;
padding:10px 0px;
background:url("http://i48.servimg.com/u/f48/16/68/07/94/unduha10.jpg") no-repeat scroll 0 0 black; background-position:bottom left;
 -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out}

::: Tapi Jika Anda sudah mempunyai code .post { di template anda,mka anda tinggl memasukkan kode yang berwarna HIJAU diantara kode .post { ditempalte anda.

Sebagai  contoh :

.post {
-----
---
background:url("http://i48.servimg.com/u/f48/16/68/07/94/unduha10.jpg") no-repeat scroll 0 0 black; background-position:bottom left;
 -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out 

}

5. Save Template,..


Sekarang lihat hasilnya.




Selamat mencoba!

0 Cara Membuat Blog

 


Cara membuat blog gratisan di Blogger panduan tutorial praktis bikin blog dalam 5 menit bagi pemula, Oleh Daily-Cyber Membikin blog di blogger.com / blogspot sungguh sangat mudah karena blogger.com milik Google.com. Karena itu apabila Anda sudah punya email gmail.com, Anda tinggal langsung daftar di blogger.com. Singkatnya ikuti langkah singkat berikut:


1. Kunjungi www.blogger.com (klik)
2. Masukkan account Email di “Alamat (Email)” dan password di “Kata Sandi”. Lihat gambar 1.
[-]Masukan Data data seperti pada gambar













kalau sudah KLIK lanjutkan
3.Isi Nama BLOG
4.Isi Template 

Contoh Blogger Yang Sudah Jadi http://daily-cyber.co.cc/