Tampilkan postingan dengan label Desain blog. Tampilkan semua postingan
Tampilkan postingan dengan label Desain blog. Tampilkan semua postingan

Efek tombol toggle

 |  1 Comment | 


Fungsi toggle yang saya tahu adalah perintah pemberi efek animasi pada suatu element di HTML.
Seperti contoh di bawah ini:


This isi paragram the paragraph to end all paragraphs. You
should feel lucky to have seen such a paragraph in
your life. Congratulations!
:v::v::v::v::v:


Bagaimana cara membuatnya?

  • Copy Script berikut:
<button id="tombol">Toggle</button>
<div id="isi">
This is the paragraph to end all paragraphs.  You
should feel <em>lucky</em> to have seen such a paragraph in
your life.  Congratulations!</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#tombol').click(function() {
        $('#isi').toggle(800);
    });
});
</script>
Keterangan:
Warna hijau adalah id tombol perintah untuk menjalankan efek toggle
Warna Biru merupakan elemen yang diberi efek.
Untuk mempercepat/memperlambat silahkan ganti angka toggle yang berwarna merah

Membuat tombol Toggle mirip dengan Spoiler?

Apa itu spoiler? :27::27:
Yupss...tombol yang dipakai untuk membuka dan menyembunyikan suatu elemen di HTML. Cara membuat spoiler sudah saya buat posting sebelumnya silahkan kunjungi posting ini Membuat Spoiler di Blog .
Berikut ini tombol Toggle yang dimodifikasi menjadi fungsi spoiler. Atau bisa juga disebut spoiler menggunakan toggle..hehehe :haha::haha:



  • Tombol toggle yang sudah di modifikasi menjadi spoiler
<button id="tombol">Toggle</button>
<div id="isi" style="display: none;">
This is the paragraph to end all paragraphs.  You
should feel <em>lucky</em> to have seen such a paragraph in
your life.  Congratulations!
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#tombol').click(function() {
        $('#isi').toggle(800);
    });
});
</script>
Keterangan:
pada elemen isi tinggal tambahin style="display: none;"  artinya disembunyikan.

Modifikasi Tombol Toggle?

modifikasi tombol toggle sama seperti tombol-tombol pada umumnya tinggal kita tambahin style="...."




<button id="tombol" style="background: #006699; border: 1px solid #234B69; color: white; font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" >Toggle</button>
<div id="isi" style="display: none;">
This is the paragraph to end all paragraphs.  You
should feel <em>lucky</em> to have seen such a paragraph in
your life.  Congratulations!
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#tombol').click(function() {
        $('#isi').toggle(800);
    });
});
</script>
Selamat Mencoba.. :c::c::c:
Terimakasih..

Follow Button di Blog

 |  No Comments | 



Berikut penampakan Follow Button di Blog

Cool Social Media Sharing Touch Me Widget by Blogger Widgets



Untuk Memasangnya copy script html di bawah ini taruh di widget HTML/JavaScript atau letakkan langsung di bawah <body> template anda, atur sesuai posisi letak yang anda inginkan.
<style>.touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor: pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style>
<div style="display: none;">
Cool Social Media Sharing Touch Me Widget by <a href="http://truebloggertricks.blogspot.in/2012/08/cool-social-media-sharing-touch-me.html">Blogger Widgets</a></div>
<div class="touchme">
<!--RSS--> <a class="rss" href="http://feeds.feedburner.com/blogspot/Cahlaban" rel="external nofollow" target="_blank"></a> <!--Google Plus--> <a class="googleplus" href="https://plus.google.com/+BambangTejoKusumo/" rel="nofollow" target="_blank"></a> <!--Facebook--> <a class="facebook" href="https://www.facebook.com/bambangtejokusumo" rel="nofollow" target="_blank"></a> <!-- Twitter --> <a class="twitter" href="https://twitter.com/bambang_te/" rel="nofollow" target="_blank"></a> </div>

Keterangan:
Ubah warna link warna biru di atas sesuai akun anda masing-masing

Selamat Mencoba :c::c::c:

Breaking News di Blog

 |  No Comments | 

Cara Pemasangan

  • Template -> Edit
  • Letakkan CSS berikut di atas ]]></b:skin>
#headline-wrapper{
background: #f7f7f7;
border: 1px solid #d4d4d4;
overflow: hidden;
position:relative;
height: 24px;
}
.headlines{
float:left;
clear:both;
width:55%;
margin:0;
overflow:hidden;
}
h4.headline{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhMzDfjZHiDunda3YRFJkx7Kcxt0EIJ8aaGwrn2QS9HGlAogpAZzxMrlMAR3N37arfqlbWHiZsJCRPLIZdMkpdI9g9xb6g0ygmwKjpeWmNYfAYPRl5QQP_bLFA9gkeJWyagyRx2P1ucTg/s1600/brnews-bg1.png") no-repeat;
background-size: 110px;
color: #FFF;
float: left;
font-size: 11px;
line-height: 1;
margin: 0;
padding: 6px 7px 7px;
width: 115px;
}
.headlines p {
margin-top: 3px;
}
#tickerAnchor{color:#555E6B;font-size: 16px;}
#tickerAnchor:hover{#3C4A53}
  • Masukkan kode HTML berikut di bawah <body> atau di bawah header sesuai letak keinginan anda.
<div id='headline-wrapper'>
<div class='headlines'>
  <h4 class='headline'>Breaking news</h4>
<p><a id='tickerAnchor' style='text-decoration:none'/></p>
<script style='text/javascript'> var theLeadString = &quot;Breaking News: &quot;; var thePostCount =5; var sBgColor; var nWidth; var nScrollDelay = 175; var sOpenLinkLocation=&quot;S&quot;; </script>
<script src='http://bambangkusumo.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=PostTicker'/>
  </div>
    </div>

Catatan:
Ubah warna merah di atas dengan link blog anda.
Jika anda menginginkan breaking news hanya label tertenu saja, maka tambahkan /-/NamaLabel
Seperti contoh:
<script src='http://bambangkusumo.blogspot.com/feeds/posts/default/-/Kesehatan?alt=json-in-script&amp;callback=PostTicker'/>

  • Langkah selanjutnya letakkan script berikut ini di atas </head>
<script src='http://web.kagan.googlepages.com/tools/PostTicker.js' style='text/javascript'> </script>
  • Simpan template anda
Selamat Mencoba..Terimaksih :c::c:

Memasang Emoticon di komentar blog

 |  5 Comments | 


Memasang emoticon di blog, Sebelumnya sama persis cara untuk memasukkan emoticon pada posting Memasukkan Emoticon kaskus di komentar blog. Dan silahkan anda pilih tertarik yang mana. Lebih jelasnya saya share kembali cara lengkapnya memasukkan emoticon ke dalam komentar blog.

  • Copy kode jquery.min.js berikut dan taruh dibawah <head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
note: apabila templata blog anda sudah terpasang jquery.min.js maka lewati langkah di atas.

  • Copy kode berikut lalu taruh di atas ]]></b:skin>
.emoWrap{ background:#fff; border:1px solid #a7a9aa; margin:5px; padding:10px;}

  • Langkah selanjutnya taruh kode script berikut di atas </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove =  "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
// Emoticon bar before comment-form
//]]>
</script>
<script src='https://emoticon-cahlaban.googlecode.com/svn/emoticon-cahlaban' type='text/javascript'/>
</b:if>

Simpan template anda di lihat hasilnya :14: :38:
Terkait dengan Emoticon di komentar blog maka saya sarankan baca Juga:
 :37: :14:

Memasukkan Emoticon Kaskus di komentar blog

 |  9 Comments | 


Blog anda ingin di pasang emoticon seperti gambar di atas? Banyak macam emoticon yang dipasang di blog..namun khusus posting kali ini saya ingin mengshare cara memasang emoticon kaskus di blog yang sudah saya modifikasi. ini bukanlah HOAX, Klik demonya.
Sebelumnya saya sudah membuat posting cara memasukkan emoticon kaskus di blog namun cara tersebut khusus untuk tampilan komentar yang sudah dimodifikasi yaitu pada posting Merubah tampilan komentar di Blog lebih menarik.

Bagaimana cara memasangnya?

  • Copy kode jquery.min.js berikut dan taruh dibawah <head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
note: apabila templata blog anda sudah terpasang jquery.min.js maka lewati langkah di atas.

  • Copy kode berikut lalu taruh di atas ]]></b:skin>
.emoWrap{ background:#fff; border:1px solid #a7a9aa; margin:5px; padding:10px;}

  • Langkah selanjutnya taruh kode script berikut di atas </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove =  "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
// Emoticon bar before comment-form
//]]>
</script>
<script src='https://emoticonkaskus-cahlaban.googlecode.com/svn/emoticon-kaskus-cahlaban' type='text/javascript'/>
</b:if>

Simpan template anda di lihat hasilnya :14: :38:

Baca Juga Mengatasi pesan komentar yang pidah ke bawah ini terkait emoticon yang muncul di bawah setiap ingin komentar. :37:
 

Membuat Spoiler di blog

 |  No Comments | 


Spoiler digunakan untuk menyembunyikan dan menampilkan konten di dalam post. Tombol spoiler ini sangat berguna bila anda membuat post yang isinya terlalu panjang. Untuk membuatnya saya kasih beberapa tampilan tombol spoiler sebagai berikut:

Spoiler #1

Tombol Spoiler:
Konten yang disembunyikan di sini...

  • Copy kode Script berikut:
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
Tombol Spoiler:  <input float="right" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName  ('div')[0].style.display != '') {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName ('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="background: #006699; border: 1px solid #234B69; color: white; font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Konten yang disembunyikan di sini...</div>
</div>
</div>

Spoiler #2

Tombol Spoiler:

  • Copy kode Script berikut:
<div id="spoiler" style="background: #f9f9f9; border-radius: 2px 2px 2px 2px; border: 1px solid #EAEAEA; padding: 5px;">
<div>
Tombol Spoiler: <input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" style="background: #006699; border: 1px solid #234B69; color: white; font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" type="button" value="lihat konten" /></div>
<div id="show" style="border: 1px solid white; display: none; padding: 2px;">
konten yang disembunyikan..
</div><div id="hide">
</div>
</div>
</div>

Spoiler #3

Tombol Spoiler:

  • Copy kode Script berikut:
<div id="spoiler" style="background: #d6d5d5; border: 1px solid #EAEAEA; padding: 5px;">
<div>
Tombol Spoiler: <input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" style="font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" type="button" value="lihat konten" /></div>
<div id="show" style="display: none; padding: 5px 2px 2px 2px;">
<div style="background-color: #eeeded; padding: 7px;">
konten yang disembunyikan..</div>
</div>
<div id="hide">
</div>
</div>

Spoiler #4



  • Copy kode Script berikut:
<div id="spoiler">
<div>
<input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" style="background: #535353; border: 1px solid #234B69; color: white; font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" type="button" value="Lihat konten" />
</div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div class="alt2" style="background-color: #f3f3f3; border-left: 6px solid; border-radius: 3px 3px 3px 3px; box-shadow: 0pt 0pt 16px #ABABAB; padding: 15px;">
konten yang disembunyikan..</div>
<div id="hide">
</div>
</div>
</div>

Selamat Mencoba...
terima Kasih,, :14::37::38:

Merubah tampilan komentar Admin blog

 |  No Comments | 



Posting ini lanjutan dari posting  Mempercantik tampilan komentar yang mana digunakan untuk merubah tampilan komentar Admin blog agar pengunjung bisa membedakan antara komentar Admin blog dengan pengunjung lainnya.

Caranya sobat cukup copy script di bawah ini dan letakkan di atas </body>
<script type='text/javascript'>
    $(function() {
      function highlight(){
        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7GD7pwBC9giwILs4TINDSIyc9Rb9y0w-7nTTZJMdPPpDmkscwp3cZb-106GqcTVlR1VhRYOAR5U3ErxXinw3T04RKSa1K9AAERHXjPJxPcBtH62dzz9PXD4DpdZFdP4n1q3WK0E-wic/s1600/admin_comment1.png&quot;) no-repeat bottom right&#39;)
          .css(&#39;padding&#39;, &#39;10px&#39;);
          }
          $(document).bind(&#39;ready scroll click&#39;, highlight);
                       });</script>
Save template nya :14:

Mempercantik tampilan komentar

 |  No Comments | 


Sebelumnya saya sudah membuat posting hal yang sama merubah tampilan komentar di blog Merubah tampilan komentar di Blog lebih menarik, Namun kali ini lebih sederhana dan lebih praktis ketika membalas komentar pengunjung tidak lagi menampilkan jendela paru (pop-up).

Cara merubahnya cukup sederhana dengan template bawaan sobat letakkan script di bawah ini di atas ]]></b:skin>
.comments .comment-block {
background: #f9f9f9;
border: 1px solid #EAEAEA;
border-radius: 3px 3px 3px 3px;
margin-left: 63px;
margin-bottom:-20px;
padding: 10px;
position: relative;
}
#comments .avatar-image-container img {
border: 0px solid #FFFFFF !important;
height: 57px;
max-width: 57px;
}
.comments .avatar-image-container {
border: 0px solid #FFFFFF;
float: left;
margin-left: 6px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}
.comment-header {
color: #000000;
border-bottom: 0px solid #F1F1F1;
}
.comment-header a {
color: #d80556;
font-family: Arial;
font-size: 16px;
border-bottom: 0px solid #F1F1F1;
}
.comment-block:hover > .comment-header {
border-bottom: 0px solid #000000;
}
.comments .comment .comment-actions a {
background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
border: 0px solid #E0E0E0;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 4px 11px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}
Kemudian Save template nya :37:

Untuk merubah tampilan (memberi gambar) pada komentar Admin Blog seperti gambar di atas bisa di baca posting berikut Merubah tampilan komentar Admin blog

Copyright © 2012 CAHLABAN. All rights reserved.