Faster Wuss

Monday, January 13, 2014

Tentang Template Demo ini

Template ini merupakan template jhonny preet yang telah di modifikasi oleh salah satu mastah blogger indonesia yaitu kang ADHY SURYADI ( admin kompi ajaib ) . sebetulnya saya hanya iseng-iseng , eh malah gak tahunya jadi begini

Fitur-Fitur Template ini

Responsive Design
Fast Loading
SEO Frendly
Ads Ready
Valid HTML5 ( home page dan postingan )
Valid CSS3 ( home page dan postingan )
Komentar hack
and many more

Template Original For

Blogger Template Style

Name : Johny Prett

Author : Maskolis

Url : http://www.maskolis.com/

Updated by: Blogger Team

This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use. However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links which provides due credit to its authors and supporters. For more specific details about the license, you may visit the URL below:

Mofifikation

-Kang kang ADHY SURYADI

Cara Modifikasi ToolTip di Blog

Membuat Modifikasi ToolTip di Blog - saya ingin membuat sebuah artikel tentang tutorial blog khususnya pada template ini. Saya akan membahas cara untuk memodifikasi tooltip di blog. Sebelumnya, tooltip merupakan sesuatu yang akan muncul jika mouse berada hover di text atau apapun yang memiliki title didalamnya. Tooltip yang biasanya muncul yaitu berbackground putih dan berwarna text hitam tanpa shadow atau bayangan yang menghiasinya. Namun, dengan adanya sebuah javascript tooltip tersebut bisa dijadikan lebih indah dari aslinya. Anda dapat memodifikasi warna background dan text bahkan menambahkan box-shadow pada tooltip tersebut. Tooltip tersebut bisa dilihat di blog ini. Nah, berikut tutorialnya

Sobat Tinggal Letakkan Javascript di bawah tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {
    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#e74c3c";
        t.style.border = "1px solid #ccc";
        t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0px 1px 5px #fff";
        t.style.padding = "10px";
        t.style.color = "#fff";
        t.style.maxWidth = "180px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');
    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";
    }
    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }
    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }
})();
//]]>
</script>

Simpan dan lihat hasilnya

Membuat Banner Amal KPK Dengan Fungsi Toggle

Banyak sebutan untuk KPK yang satu ini namun yang jelas bukan lembaga pemerintah yang yang mengurusi para koruptor itu hehehe. Mulai dari Komunitas Penggalang Kebaikan, Kami Peduli Kawan, Kumpulan Para Koplaker heheheehe... dan lain-lain (untuk dan lain-lain terserah Anda deh). Di KPK ada kotak amal bagi siapa saja yang peduli dan mau menyumbang untuk kawan-kawan kita yang terkena musibah dan lain-lain. Dan kotak amalnya berupa banner.

Cara Membuat Banner Amal KPK Dengan Fungsi Toggle :

Langkah Pertama sobat harus memasang CSS ini di atas ]]></b:skin> atau </style>

.button1 {width: 262px;font-size:18px;font-family: Arial;font-weight:normal;border:1px solid #3866a3;padding:9px 18px;text-decoration:none;background-color:#63b8ee;color:#ffffff;display:inline-block;text-shadow:1px 1px 0px #7cacde;box-shadow:inset 1px 1px 0px 0px #bee2f9;cursor:pointer}
.button1:hover {background-color:#468ccf;text-shadow:none}
#box {display:none}
.box-dalam {background:#009999;text-decoration: none;width:300px;height:250px;margin:0;padding:0;position:relative}
.title1 {font:30px Oswald;color:#fff;margin-left:18%}
.title2 {font:18px Oswald;color:#fff;margin-left:35%}
.isi-box1 {padding-top:15px;text-align:center;font:12px Oswald;color:#fff}
.isi-box2 {margin:15px 0 0 10px;font:12px Oswald;color:#fff;text-align:left}
.tombol-kpk {background:#ddd;border:1px solid #666;border-radius:4px;text-decoration: none;padding:1px 5px;float: right;color:#333;margin-right:7px;margin-top:-2px}
.tombol-kpk a {color:#333;text-decoration:none;font-size:12px}
.tombol-kpk:hover {background:#bbb;text-decoration:none}

Langkah ke 2 Silahkan simpan kode ini di atas kode </body>

$(function() {  
    $("#run").click(function () { 
    $("#box").toggle("slow") 
}); 
 });

Langkah Terkahir Silahkan simpan di sidebar pada gadget HTML/JavaScript

<div class="button1" id="run">Anda peduli kawan? Klik Di sini</div>
<div class="toggler">
  <div id="box">
<div class="box-dalam">
<div class="title1">Kami Peduli Kawan</div>
<div class="title2">KPK Blogger Community</div>
    <div class="isi-box1">
Komunitas Penggalang Kebaikan (KPK)<br/>
    Membuka rekening amal untuk membantu saudara-saudara<br/>
    kita yang tertimpa musibah atau bencana.
</div>
<div class="isi-box2">
Bagi yang ingin memberikan bantuan, Anda bisa<br/>
menyalurkan melalui rekening di bawah ini:<br/>
- Bank Permata KCP Gajah Mada Pontianak<br/>
- No. Rek. 651.053.5829 a. n. Asep Haryono</div>
<div class="tombol-kpk">
<a href="http://www.123contactform.com/form-517524/REKENING-AMAL-KPK" rel="nofollow" target="_blank" title="Klik Di Sini">Klik Di Sini</a><br />
</div>
        </div>
</div>

Simpan Template dan lihat hasilnya

Jika ingin mencoba menggunakan fungsi toggle lainnya seperti bounce, clip, blind, dan lain-lain silahkan baca lagi postingannya di link di bawah ini. Jangan lupa untuk menambahkan jquery-ui agar efeknya bisa berjalan.

Membuat Related Posts dengan Thumbnails

Membuat Related Posts dengan Thumbnails- halo gimana kawan di template demo ini saya akan memberikan tutorial membuat Artikel Terkait, dengan thumbnails , contoh seperti gambar ini :

Ok , langsung saja tanpa basi and basi ini dia langkahnya :

1. Masuk ke Dasbor > Tata Letak > Edit HTML, beri centang pada "Expand Template Widget"
2. Cari kode </head>
Ganti dengan kode ini :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px}
#related-posts h2{font-size:1.6em;font-weight:bold;color:black;font-family:Georgia,“Times New Roman”,Times,serif;margin-bottom:0.75em;margin-top:0;padding-top:0}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts  a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw05vxJMq5t9pfU2HbYce-q9xuJ2mW0xVeYONEVTPSvO6xcBL9oYTlyRi_aEm31URfMx1tv9YMiaPsBzkQh0Cis53mdZp_p3PcXNaq5M5zB72hS6HCvF_K46hUGP9ka5EO7O-v5gZnWRY/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4. Setelah itu cari kode ini : <div class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<!-- Related Posts with Thumbnails Code End-->

Langkah Terakhir simpan Template dan lihat hasilnya

Saturday, November 16, 2013

Subhanallah Pemandanganya Indah sekali Brow

Subhanallah Pemandanganya Indah sekali Brow - Begitu besar kekuasaan Allah , dialah yang meciptakan dan tidak pula diciptakan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus. Sed egestas fringilla turpis at ullamcorper. Pellentesque adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus. Sed egestas fringilla turpis at ullamcorper. Pellentesque adipiscing ornare cursus. Aliquam a nulla sapien. Sed facilisis ultricies purus, sed dapibus eros auctor vel. Phasellus et est nibh. Sed sagittis neque vel magna euismod ut vulputate sapien tempus. Fusce feugiat condimentum nulla. Aliquam quis convallis nunc. Nulla eu eros quam. Heading H1Suspendisse elementum tincidunt mi, non dictum nibh molestie a. In placerat rutrum felis, eu lacinia nunc eleifend vitae

Tiga Penguin Sedang Berpelukan

Tiga Penguin Sedang Berpelukan- waw keren da ada tiga pinguin yang sedang berpelukan .Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus. Sed egestas fringilla turpis at ullamcorper. Pellentesque adipiscing