TheÐevil's

Showing posts with label posting. Show all posts

Friday, February 8, 2013

Macam -Macam Spoiler Macam -Macam Spoiler

Posted by Nganuah at 7:15 AM · 0 comments

Berikut Macam -Macam Spoiler Sobat, Klik dibawah ini

Contoh 1

Letakkan tulisan , artikel , gambar disini

Kodenya ;

<div style="border: 0px inset green; padding: 0px;">
<div>
<button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler." type="button"><span style="color: black;"><span style="color: #DF0101; font-weight: bold;"><blink>J U D U L S P O I L E R</blink></span></span></button></div>
<div id="spoiler" style="display: none;">
<span style="color: #006600; font-weight: bold;">Letakkan tulisan , artikel , gambar disini</span></div>
</div>

Contoh 2

Kodenya ;

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="LIHAT" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Letakkan tulisan , artikel , gambar disini</p></div><div id="hide"></div></div></div>

Contoh 3

Judul

kodenya ;

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul</span></i><input 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="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="SPOILER" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan artikel sobat disini</div>
</div>
</div>
</div>

Contoh 4

Kodenya ;

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="BUKA" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">LETAKKAN KODENYA DISINI</p></div><div id="hide"></div></div></div>

Contoh 5

Kodenya ;

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Letakan artikel sobat disin</div></div></div>

Selamat mencoba
Narasumber ; www.mbahgoogle.com

Mengganti background area postingan dengan gambar dan animasi

Posted by Nganuah at 7:05 AM · 0 comments

Letakan Kode dibawah ini Tepat Diatas Kode ]]></b:skin>

.post{border-radius:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyW-5a-nN6mQB6r3qvU_cAxkHJH40zpjY9j49cz3W5D8RO0nVXH6JCQBJZUNbqcyWl1_oaFvuqyhUKDFTkVBgy8-nN15nHDzE-YqnLfsRvFkn9U-S_GhIkp5gR_K3er4KfS7JYKAN2KmX2/s1600/background-judul-posting.gif) no-repeat center;background-size:cover;border:2px solid #f00;Margin-bottom:1px;
}
.post:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
}

Cara Membuat Blogazine Post Cara Membuat Blogazine Post

Posted by Nganuah at 6:51 AM · 0 comments

Menurut saya Blogazine Post (unik posting), adalah inspirasi (imajinasi) seorang Penulis/Blogger dalam menyampaikan artikelnya tersebut dalam bentuk yang relatif unik (bisa dibilang berbeda-beda disetiap halaman postingan artikelnya). Untuk Blogazine Post, design/tampilan, lazimnya disesuaikan dengan Artikel yang di tulis.

Lalu apa sih tujuannya si pemilik blog menulis artikelnya dengan konsep/style Blogazine Post? Blogazine Post itu menurut saya bukanlah Trend atau sekedar Bergaya (tapi sueer lagi ngetrend). Namun Blogazine Post adalah sebuah konsep, dimana blogger/penulis tersebut menyampaikan artikelnya tersebut, layaknya seperti kita membaca dan membuka majalah (Magazine), yang mana tampilan design pada setiap halaman posting (artikel) selalu dibuat berbeda-beda dan disesuiakan dengan tema/isi artikelnya, yang tujuannya agar si pembaca merasa betah dan nyaman saat membaca setiap artikel diblog kita. ennn...lalu bagaimana membuat blogazine post (post Unik).

Berikut ini adalah Tips sederhana membuat Blogazine Post :

    Pertama-tama bersyukurlah kepada Tuhan karena kita semua masih diberi kesehatan, sehingga kita masih diberikan kesempatan untuk belajar Ngeblog.
    Belajarlah sedikit tentang CSS dan HTML
    Pahami Dulu Template Blog yang sobat pakai (CSSnya dan HTMLnya).
    Selipkan/masukkan kode CSS/HTML disetiap Postingan.

Contoh sederhana kita mulai saja dari cara merubah background dipostingan yang kita buat, masukkan kode CSS seperti ini :
1. background warna dasar

<style>
body{background:#000;
}
</style>

2. background dengan menggunakan gambar

<style>
body{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGaY46DOE4H2Vp3BZGJWadtRtIdjKXPquVh36ac0aSZ4pkv754NxS_XxCmATfuXnKspZIQSiP7VzwWSGGgNCYTgg-F54YgFoJsXBMcSVC-yfOw1wtX3fx-r9AT6ofSMio9_SgcYSUYVY_B/s1600/tempik.gif) repeat;
}/*atau no-repeat fixed center, no-repeat center, dll (sesuaikan dengan size gambar)*/
</style>

Wednesday, January 30, 2013

Thumbnail Effect With Zoom And Sliding Captions

Posted by Nganuah at 5:21 AM · 0 comments

DEMO

CSS:

    .thumbnailWrapper { width:600px; margin:0px auto; } /* not important */

    .thumbnailWrapper ul {
    list-style-type: none; /* remove the default style for list items (the circles) */
    margin:0px; /* remove default margin */
    padding:0px; /* remove default padding */
    }
    .thumbnailWrapper ul li {
    float:left; /* important: left float */
    position:relative; /* so we can use top and left positioning */
    overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
    }
    .thumbnailWrapper ul li a img {
    width:200px; /* not important, the pics we use here are too big */
    position:relative; /* so we can use top and left positioning */
    border:none; /* remove the default blue border */
    }
    .caption{
    position:absolute; /* needed for positioning */
    bottom:0px; /* bottom of the list item (container) */
    left:0px; /* start from left of the list item (container) */
    width:100%; /* stretch to the whole width of container */
    display:none; /* hide by default */
    /* styling bellow */
    background:rgba(0,0,0,0.8);
    color:white;
    }
    .caption .captionInside{
    /* just styling */
    padding:10px;
    margin:0px;
    }
    .caption p{
    text-align:center;
    font-size:110%;
    }
    .clear { clear:both; } /* to clear the float after the last item */

SCRIPT:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

    <script type="text/javascript" charset="utf-8">
    $(window).load(function(){
    //set and get some variables
    var thumbnail = {
    imgIncrease : 100, /* the image increase in pixels (for zoom) */
    effectDuration : 400, /* the duration of the effect (zoom and caption) */
    /*
    get the width and height of the images. Going to use those
    for 2 things:
    make the list items same size
    get the images back to normal after the zoom
    */
    imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
    imgHeight : $('.thumbnailWrapper ul li').find('img').height()
    };

    //make the list items same size as the images
    $('.thumbnailWrapper ul li').css({
    'width' : thumbnail.imgWidth,
    'height' : thumbnail.imgHeight
    });

    //when mouse over the list item...
    $('.thumbnailWrapper ul li').hover(function(){

    $(this).find('img').stop().animate({

    /* increase the image width for the zoom effect*/
    width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
    /* we need to change the left and top position in order to
    have the zoom effect, so we are moving them to a negative
    position of the half of the imgIncrease */
    left: thumbnail.imgIncrease/2*(-1),
    top: thumbnail.imgIncrease/2*(-1)

    },{

    "duration": thumbnail.effectDuration,
    "queue": false
    });

    //show the caption using slideDown event
    $(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);

    //when mouse leave...
    }, function(){

    //find the image and animate it...
    $(this).find('img').animate({

    /* get it back to original size (zoom out) */
    width: thumbnail.imgWidth,
    /* get left and top positions back to normal */
    left: 0,
    top: 0

    }, thumbnail.effectDuration);

    //hide the caption using slideUp event
    $(this).find('.caption').slideUp(thumbnail.effectDuration);

    });
    });
    </script>

HTML:

    <!-- start thumbnailWrapper -->
    <div class='thumbnailWrapper'>
    <ul>
    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/1.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>CofeeNerd</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/2.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>musiKings</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/3.png' /></a>
    <div class='caption'>
    <p class='captionInside'>The Caribbean Energy Conference 2010</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/4.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>Coffee</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/5.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>Quantum</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/6.png' /></a>
    <div class='caption'>
    <p class='captionInside'>Infinite Love</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/7.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>Fathom</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/9.PNG' /></a>
    <div class='caption'>
    <p class='captionInside'>Mixed Pome</p>
    </div></li>

    <li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/10.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>Golf Lessons Online</p>
    </div></li>
    <div class='clear'></div><!-- clear the float -->
    </ul>
    </div><!-- end spolightWrapper -->

Styling Striped TABLE Using Only CSS Styling Striped TABLE Using Only CSS

Posted by Nganuah at 5:12 AM · 0 comments

DEMO

CSS:

    /* Very Best Table Styling */
    ol{margin:1em 1em 1em;padding:1em 1em 1em;}
    table
    {text-align:left;font-size:13px;font-family:Monaco,Monospace !important;
    color:#CFDBEC;text-shadow:1px 2px 1px #000, 0px -1px 2px #000, 1px 1px 2px #000;
    background-color:#2f2f2f;
    border-collapse:collapse;
    width:100%;
    border:none;
    }
    thead,thead th
    {color:#0075B5;font-size:15px;font-family:dungeon;font-weight:bold;line-height:28px;text-align:left;padding:1em 1em 1em;background:#0f0f0f;
    }
    td, th
    {padding:1em 1em 1em;
    }
    * html tr.odd td, tbody tr.odd td, #middle
    {
    background:rgba(0, 0, 0, 0.15);
    }
    tfoot td,tfoot tr
    {background:rgba(0, 0, 0, 0.15);
    padding-bottom:1.5em;
    }
    tfoot
    {background:rgba(0, 0, 0, 0.5);color:#FFDEAD;
    }

HTML:

    <table><col> <col id="middle"> <col> <thead>
    <tr><th>Ingredients</th><th>Serves 12</th><th>Serves 24</th></tr>
    </thead> <tfoot>
    <tr><td colspan="3"><ol>
    <li>Combine milk and spices including vanilla bean in a heavy saucepan and let them infuse over lowest possible heat for 5 minutes. Meanwhile, combine yolks and sugar in a large bowl and whisk until mixed.</li>
    <li>Bring milk to a boil and gradually whisk it into the yolk mixture. Return the mixture to the saucepan. Cook over medium heat, stirring steadily with a wooden spoon, for 2 to 3 minutes, or until foam subsides and mixture thickens to consistency of heavy cream. (Mixture should thickly coat the back of a wooden spoon.) Do not boil, or mixture will curdle.</li>
    <li>Strain mixture into a large bowl and let cool to room temperature. Stir in rum, brandy, half-and-half, vanilla and nutmeg.</li>
    <li>Refrigerate eggnog for at least 2 hours, preferably overnight. Just before serving, dust top of eggnog with additional nutmeg.</li>
    </ol>
    </td></tr>
    </tfoot> <tbody>
    <tr><td>milk</td><td>1 quart</td><td>2 quart</td></tr>
    <tr class="odd"><td>cinnamon sticks</td><td>2</td><td>1</td></tr>
    <tr><td>vanilla bean, split</td><td>1</td><td>2</td></tr>
    <tr class="odd"><td>cloves</td><td>5</td><td>10</td></tr>
    <tr><td>mace</td><td>10 blades</td><td>20 blades</td></tr>
    <tr class="odd"><td>egg yolks</td><td>12</td><td>24</td></tr>
    <tr><td>cups sugar</td><td>1 ½ cups</td><td>3 cups</td></tr>
    <tr class="odd"><td>dark rum</td><td>1 ½ cups</td><td>3 cups</td></tr>
    <tr><td>brandy</td><td>1 ½ cups</td><td>3 cups</td></tr>
    <tr class="odd"><td>vanilla</td><td>1 tbsp</td><td>2 tbsp</td></tr>
    <tr><td>half-and-half or light cream</td><td>1 quart</td><td>2 quart</td></tr>
    <tr class="odd"><td>Freshly grated nutmeg to taste</td><td></td><td></td></tr>
    </tbody> </table>

Tuesday, January 29, 2013

Cloud Zoom Is A Popular Fly-Out jQuery Cloud Zoom Is A Popular Fly-Out jQuery

Posted by Nganuah at 9:06 PM · 0 comments

DEMO

CSS:

    <style type="text/css">
    .section {min-width:100%;max-width:100%;
    _width:100%;}

    .cloudzoom-lens-thick {border:5px solid #eee;width:125px;height:125px;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;box-shadow:-0px -0px 5px rgba(0,0,0,0.50);-moz-box-shadow:-0px -0px 5px rgba(0,0,0,0.50);-webkit-box-shadow:-0px -0px 5px rgba(0,0,0,0.50);cursor:crosshair;}

    .cloudzoom-zoom-thick {border:7px solid #fff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:-0px -0px 10px rgba(0,0,0,0.20);-moz-box-shadow:-0px -0px 10px rgba(0,0,0,0.20);-webkit-box-shadow:-0px -0px 10px rgba(0,0,0,0.20);}

    .cloudzoom-zoom-inside {cursor:pointer;}

    .image-wrap {border:1px solid #eee;display:inline-block;line-height:0;margin-top:20px;margin-bottom:10px;}

    #fullsize img {border:1px solid #eee;}

    .left-half {
        width:50%;
        float:left;
        padding:0;
        display:inline-block;
    }

    .left-in {
        margin-left:5px;
        margin-right:5px;
    }
    .right-in {
        margin-right:5px;
        margin-left:5px;
    }
    .right-half {
        width:50%;
        float:right;
        padding:0;
        display:inline-block;
    }
    .middle-in {
         margin-left:5px;
         margin-right:5px;
    }

    a.starzoom-gallery  img {
        border:1px solid #ccc;
        margin-right:5px;
        width:70px;
    }

    a.starzoom-gallery  img:hover {
        border:1px solid #f60;
    }


    .starzoom {
        cursor:pointer;
        cursor:-moz-zoom-in;
        cursor:-webkit-zoom-in;
        background-image:url('http://www.starplugins.com/sites/starplugins/images/viewport-bg.png');
    }

    #ipadzoom.starzoom {
        background:none;
    }


    fieldset {
        border:1px solid #ccc;
        border-radius: 5px;
        margin-bottom:20px;
    }


    #addthis-wrap {
        position:absolute;
        top:-41px;
        right:190px;
        width:140px;
        height:32px;
        padding:3px;
    }


    .highlight {
        border-radius:5px;
        -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        background-color:#f60;
        color:#fff;
        padding:15px 15px 15px 15px;
        font-size:16px;
    }




    /*************** TABS ******************/
               
    /* root element for tabs  */
    ul.tabs {
        list-style:none;
        margin:0 !important;
        padding:0;
        border-bottom:1px solid #666;
        height:30px;
    }

    /* single tab */
    ul.tabs li {
        float:left;
        text-indent:0;
        padding:0;
        margin:0 !important;
        list-style-image:none !important;
    }

    /* link inside the tab. uses a background image */
    ul.tabs a {
        background: url(http://www.starplugins.com/sites/starplugins/images/tabs.png) no-repeat -420px 0;
      
        font-size:11px;
        display:block;
        height: 30px;
        line-height:30px;
        width: 134px;
        text-align:center;
        text-decoration:none;
        color:#333;
        padding:0px;
        margin:0px;
        position:relative;
        top:1px;
    }

    ul.tabs a:active {
        outline:none;
    }

    /* when mouse enters the tab move the background image */
    ul.tabs a:hover {
        background-position: -420px -31px;
        color:#fff;
    }

    /* active tab uses a class name "current". its highlight is also done by moving the background image. */
    ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
        background-position: -420px -62px;
        cursor:default !important;
        color:#000 !important;
    }

    /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


    /* width 1 */
    ul.tabs a.s { background-position: -553px 0; width:81px; }
    ul.tabs a.s:hover { background-position: -553px -31px; }
    ul.tabs a.s.current  { background-position: -553px -62px; }

    /* width 2 */
    ul.tabs a.l { background-position: -248px -0px; width:174px; }
    ul.tabs a.l:hover { background-position: -248px -31px; }
    ul.tabs a.l.current { background-position: -248px -62px; }


    /* width 3 */
    ul.tabs a.xl { background-position: 0 -0px; width:248px; }
    ul.tabs a.xl:hover { background-position: 0 -31px; }
    ul.tabs a.xl.current { background-position: 0 -62px; }


    /* initially all panes are hidden */
    .panes .pane {
        display:none;
    }
    </style>

    <link href="http://www.starplugins.com/sites/starplugins/js/prettify/prettify.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/starzoom.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/jetzoom/jetzoom.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/cloudzoom/cloudzoom.css?v=1" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" href="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.css??v=1" type="text/css" media="screen" />

SCRIPT:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay (4.45 Kb) -->
    <script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/jquery.mousewheel.js"></script>
           
    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/starzoom.js?v=1"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/jetzoom/jetzoom.js?v=3"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/cloudzoom/cloudzoom.js?v=20"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/prettify/prettify.js"></script>
           
    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.js?v=1"></script>

    <script type="text/javascript">
        $(function(){
            $('#zoom1').bind('click',function(){
                var jetZoom = $(this).data('JetZoom');
                $.fancybox.open(jetZoom.getGalleryList());
                return false;
            })
        })
    </script>

    <script type="text/javascript">
                 $(function(){
                     $('pre').addClass('prettyprint'); // Add pretty print to pre elements.
                     prettyPrint();
                    // setup ul.tabs to work as tabs for each div directly under div.panes
                    $("ul.tabs").tabs("div.panes > div");
                 });
                 StarZoom.quickStart();
                 JetZoom.quickStart();
                 CloudZoom.quickStart();
    </script>

HTML:

<br />
<div class="left-half">
<div class="left-in">
<div style="text-align: center;">
<div style="border: 1px solid #ccc; display: inline-block; line-height: 0;">
<span class="cloudzoom-caption" id="cap1">.</span>
   
            <img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                        &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg&quot;,
                        &quot;zoomMatchSize&quot;:true,
                        &quot;tintColor&quot;:&quot;#000&quot;,
                        &quot;tintOpacity&quot;:0.25,
                        &quot;captionPosition&quot;:&quot;bottom&quot;
                        }" id="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" title="Cloud Zoom has many configuration options to match the look and feel of your website" />
                 <br />
<div class="cloudzoom-caption">
<br /></div>
</div>
<div style="margin-top: 10px;">
<a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg">   
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg&quot;,
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg&quot;}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" title="Cloud Zoom has many configuration options to match the look and feel of your website" width="64" />
            </a>
          
            <a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg">
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg&quot;,
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg&quot;}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" title="Works great with iPad and other touch-enabled devices" width="64" />
            </a>

            <a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg">
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg&quot;
                     }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" title="Regular free updates and new features with technical support" width="64" />
            </a>
        </div>
</div>
</div>
</div>
<br />
<div class="left-in">
<h2>
Gallery Elements</h2>
<br />
<div style="text-align: right;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                     zoomImage: 'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',
                     zoomPosition: 12,
                     zoomSizeMode: 'image',
                     zoomOffsetX: -15" id="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" />

            </div>
</div>
</div>
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Lens and Zoom CSS</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg&quot;,
                     &quot;lensClass&quot;:&quot;cloudzoom-lens-thick&quot;,
                     &quot;zoomClass&quot;:&quot;cloudzoom-zoom-thick&quot;
                     }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" />
            </div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Single Image Mode</h2>
<br />
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="zoomPosition:12, zoomOffsetX:0, uriEscapeMethod:'encodeURI'" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg" width="300" />
        </div>
</div>
</div>
</div>
=========
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Tints</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                         &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg&quot;,
                         &quot;tintColor&quot;:&quot;#f90&quot;
                         }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" />
                </div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Inner Zoom</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                         &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg&quot;,
                         &quot;zoomPosition&quot;:&quot;inside&quot;
                         }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" />
                </div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Captions</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg&quot;,
                             &quot;captionSource&quot;:&quot;#caption1&quot;,
                             &quot;captionType&quot;:&quot;html&quot;
                             }" id="zoom2" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" />
                    </div>
<div class="cloudzoom-caption" id="caption1">
This is an <span style="color: #ffcc00; font-weight: bold;">HTML</span> type caption. You can include <i>any</i> type of content in here!</div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Position</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg&quot;,
                             &quot;zoomPosition&quot;:&quot;#zoom2&quot;,
                             &quot;captionPosition&quot;:&quot;bottom&quot;

                             }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" title="This position was defined by a selector." />
                    </div>
</div>
</div>
</div>
</div>
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Modal Pop-up Window (e.g. Fancy Box)</h2>
<br />
<div class="right-in">
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image9.jpg&quot;,
                             &quot;zoomPosition&quot;:&quot;inside&quot;
                             }" id="myFancyCloudZoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg" title="The image title will also be passed to Fancy Box" />
                    </div>
</div>
</div>
</div>
</div>
</div>
=========
<br />
<div class="section" style="width: 100%;">
<!-- div class="left-half" -->
    <br />
<div class="middle-in">
<h2>
Cloud Zoom in Tabbed Content</h2>
<br />
<div class="panes">
<div style="width: 100%;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',zoomSizeMode: 'image'" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" />
                </div>
</div>
<div>
<br />
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg', zoomPosition:4" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" width="150" />
                </div>
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg', zoomPosition:4" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" width="150" />
                </div>
</div>
<div>
<div style="width: 100%;">
<br /></div>
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg',
                         zoomPosition: 'inside', zoomFlyOut:false" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" />
                </div>
</div>
</div>
</div>
</div>
<br />
<div class="section" id="fullsize">
<div class="left-half">
<div class="left-in">
<h2>
Full Size Zoom</h2>
<br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image1.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image2.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image3.jpg" />
                <br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image4.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image5.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image5.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image6.jpg" />
                <br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image7.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image8.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image8.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg&quot;, &quot;zoomFullSize&quot;:true, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image9.jpg" />

            </div>
</div>
</div>

Friday, January 25, 2013

daftar isi by logcyber daftar isi by logcyber

Posted by Nganuah at 6:26 AM · 0 comments

<style>#daftar-isi-body{         width:760px!important;
         height:600px!important;         padding:30px 40px;
         margin:0 auto;
}
 #daftar-isi-wrap 
{
         margin: 0 auto;
}
 .box-posting 
{
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSbq-2DuRaSFRS7QLoKtqRs1iezUxlY8-Dp66Y3m7AjPNo2AmmTMJG1ynw0kCj1NnaMbBRgYx1ChM8-0dmv1ZwW8-MIyiAHSt6NMAgimjqVpBeafvG2ww-389lWBDL8hyphenhyphenKQOHhu-I9uM/s1600/bg-box.png);
         background-position:bottom center;
         background-repeat:no-repeat;
         overflow:hidden;
         cursor:pointer;
         float:left;
         height:140px;
         width:248px;
         margin:-50px 0 0 0;
}
 .box-posting img 
{
         height:46px;
         width:46px;
         float:left;
         margin:20px 0 0 25px;
         background-color:#2E0700;
         border:1px solid #2E0700;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 50%;
}
 .box-posting .judul-posting 
{
         float:left;
         height:35px;
         margin:0;
         width:220px;
}
 .box-posting .judul-posting a
{
         font-family:arial,Serif !important;
         color:#774A34!important;
         text-shadow:0 0 1px rgba(0,0,0,0.9);
         margin:-40px 0 0 80px;
         display:block;
         font-size:13px !important;
         line-height:18px!important;
         font-weight:bold !important;

}
 .box-posting .judul-posting a:hover
{
         color:#333!important;
}
 .box-posting:hover 
{
         border-left-color:#C6EB04;
}

 #totales 
{
         text-align:center;
         color:#774A34 !important;
         text-shadow:0 1px rgba(0,0,0,0.2);

}
 #loadingscript 
{
         color:#444;
         font-family:Century Gothic;
         font-size:100px;
         letter-spacing:-10px;
         text-align:center;
         text-shadow:-5px 0 1px #444;
}
 #paginacion 
{
         color:#BBB;
         font-size:24px;
         font-weight:bold;
         height:35px;
         line-height:28px;
         padding:0;
         margin:0 auto;
         text-align:center;
}
 #paginacion span,#paginacion a 
{
         display:inline-block;
         font-size:13px !important;
         line-height:24px;
         font-weight:bold;
         margin:0 1px;
         width:25px;
         height:25px;
}
#paginacion a, #paginacion span.actual  
{
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI48bNIR6GxIzglfO18iyQzQikm1oXN7ijrBZR1vOsrDa7iVmiL9YPACrmpzDcpoh7BH98AZqMIInVgTRLTrbcUw3_6LXjhTPgl7p84FxD88za3idwWH9LDc9vCpFdPTc7wYflXfDhlz4/s1600/page-link.png);
         background-position:top center;
         background-repeat:no-repeat;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
}
 #paginacion span.actual 
{
         color:#774A34 !important;

}
 #paginacion a:hover 
{
         color:#FFF !important;
}
 #paginacion .nextprev-link,
 #paginacion span.nextprev-link 
{         border:none;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
         width:100px;
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeletWIfCyg7RWrfpkwCYeWFEdIsTj-rhjlnyjNnu11I-r6NXR8v4Ck4U1jx6BPTMVXfgrGKUmgzwl86h2sR_loUIvf92pg39w6IxPwJFCLKDlyfeIGLmWk5uQiiyJR-PY1ZDfve4zw_w/s1600/nextprev.png);
         background-position:top center;
         background-repeat:no-repeat;
}
</style>

                           <script type="text/javascript"> 
                                 var jumlahposting = 18;
                   var urlblog = "http://logcyber.blogspot.com/";
                   var minpaginas = 5;
                   var maxpaginas = 10;
                   var thumbs = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFS4ojojKxZ8D4Xe0zfehRBRP9lbVz-hZrViQgLozyhUQxCU9rA9G9cUKGoxU047uPtfR_P0S6XGWf5N7RbfPit1fjtMCnYZ3c1tcmVoxOjg9rhlL2xDwbZAtFHFviR0xUQICbnGeKjSw/s1600/icon-img.png";
</script><script language="javascript" src="http://free-files-urangkurai.googlecode.com/files/sitemap.js"></script>

DEMO

Tuesday, January 22, 2013

Cara membuat halaman utama tampil penuh Cara membuat halaman utama tampil penuh

Posted by Nganuah at 11:42 PM · 0 comments

DEMO
cari kode </head>
Masukkan kode dibawah ini tepat diatas kode </head>

<b:if cond='data:blog.url == &quot;http://logcyber.blogspot.com/&quot;'>
    <style>
.lsidebar{display: none !important;}#rsidebar-wrapper{display:none !important}.comment-form{display:none !important}.comments{display:none !important}
#main-wrapper,.post{width:860px;}
    </style>
    </b:if>

Ganti http://logcyber.blogspot.com/dengan alamat url halaman posting yang ingin ditampilkan 1 halaman penuh , bisa juga halaman utama sobat .
Ganti tulisan bergaris bawah lsidebar,#rsidebar-wrapper,#main-wrapper dengan kode CSS sidebar dan tempat utama sobat. Jika sama, tidak perlu diganti dan Ganti ukuran lebar 860 sesuka hadi anda...

lebih jauh:
sebenar nya hal ini cuma menggunakan tag kondisional click...

Wednesday, January 2, 2013

JavaScript Popup Copy Code JavaScript Popup Copy Code

Posted by Nganuah at 6:03 AM · 0 comments

Letakkan kode ini di atas </body>:

<script type="text/javascript">
//<![CDATA[
function copy_code(id) {
    var ref = document.getElementById(id),
        code = ref.getElementsByTagName('code')[0].innerHTML,
        w_w = window.innerWidth,
        w_h = window.innerHeight,
        win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + ((w_h/2)-150) + ',width=500,height=300,scrollbars=0');
    win.document.write('<!DOCTYPE html><html><head><title>Source Code</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:270px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}

function add_copy_button() {
    var pre = document.getElementsByTagName('pre');
    for (var i = 0; i < pre.length; i++) {
        pre[i].id = 'code-' + i;
        pre[i].className += ' quick-copy';
        pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code(\'code-' + i + '\');">Copy</a>';
    }
} add_copy_button();
//]]>
</script>

Lalu tambahkan kode CSS ini di atas ]]></b:skin> :

pre {position:relative}
pre .c_b {
  display:block;
  position:absolute;
  top:0;
  right:0;
  padding:2px 5px;
}

Markup HTML

<pre><code> ... </code></pre>

semoga behasil......

Monday, December 31, 2012

Tampilan Posting Berbeda-Beda Berdasarkan Label

Posted by Nganuah at 9:45 PM · 0 comments

Saya hanya merasa sedikit penasaran dengan blog Darcy Clarke yang memiliki warna artikel berbeda-beda berdasarkan label posting. Pada awalnya Saya mencoba untuk melihat isinya, karena Saya pikir ada semacam script ajaib untuk melakukan sihir itu. Sayangnya Saya tidak menemukan apapun. Yang Saya temukan hanya tag <style> berisi CSS pendek untuk menyatakan warna latar posting tunggal:

<style type="text/css">
    body
     { background: #DB8B23; }
    body h1 small
     { color: #DB8B23; }
    body #body
     { color: #000; }
</style>

Dalam Wordpress, ciri kecil seperti ini biasa disebut sebagai Custom Post. Hal ini bisa dilakukan dengan cara menginstal plugin Art Direction. Tapi setahu Saya plugin ini hanya berfungsi untuk menerapkan CSS tambahan tersebut pada saat kita memasuki halaman artikel tunggal, dan bukan menerapkan CSS pada setiap posting seperti gambar di atas.

Art Direction Plugin — Plugin Art Direction Wordpress

Meskipun, jika kita bisa mengetahui masing-masing kelas posting (misalnya .post-#postid), kita bisa saja menerapkan kode CSS pada masing-masing kelas tersebut:

.post-2444 {
  background-color:red;
}
.post-2445 {
  background-color:green;
}
.post-2446 {
  background-color:blue;
}

Tapi kelas posting tidak bisa kita kendalikan. Dan lagipula, Blogger tidak memiliki fasilitas seperti ini. Di sini kita tidak membicarakan mengenai tampilan posting yang berbeda-beda berdasarkan urutan acak melainkan membicarakan tentang tampilan posting yang berbeda-berbeda berdasarkan label, sehingga semuanya harus bisa kita kendalikan dengan baik.

Saat itu Saya cuma memikirkan tentang nama label yang tercantum pada setiap posting. Seandainya Saya bisa mengakses nama label tersebut dan menciptakan kodisi, maka Saya bisa menuliskan kode CSS khusus untuk setiap posting yang mengandung label dengan kata tertentu. Pikiran Saya berhenti pada selektor :contains(). Saya harap Saya bisa menemukan label berisi teks tertentu di dalam setiap posting, dan dengan cara itulah Saya akan menciptakan kondisi.

Yang terpenting adalah kita temukan terlebih dahulu elemen yang biasanya membungkus daftar label pada catatan kaki posting. Dalam blog ini Saya mendapati elemen ini:

Kita gunakan elemen itu untuk dijadikan sebagai induk dari daftar label posting. Dan kita bisa menciptakan kondisi dengan cara melihat semua artikel yang ada, kemudian kita cek apakah sebuah label berisi teks tertentu ada atau tidak di dalamnya. Jika ada, lakukan sesuatu pada posting tersebut!

// Lihat semua posting yang ada kemudian cek masing-masing tautan di dalam span.post-labels
// Cek apakah di dalamnya terdapat kata tertentu atau tidak (misalnya: Menyenangkan)
// Jika ada, tambahkan satu kelas spesifik baru pada posting tersebut
$('div.post').each(function() {
    if ($('span.post-labels a:contains(Menyenangkan)', this).length == 1) {
        $(this).addClass('red');
    } else if ($('span.post-labels a:contains(Jelek)', this).length == 1) {
        $(this).addClass('green');
    } else if ($('span.post-labels a:contains(Bosan)', this).length == 1) {
        $(this).addClass('blue');
    } else if ($('span.post-labels a:contains(Mamamia)', this).length == 1) {
        $(this).addClass('yellow');
    }
});

Nah! jika semua posting berlabel tertentu sudah mendapatkan kelasnya masing-masing, kita bisa mendefinisikan tampilannya di dalam CSS seperti ini:

.post.red    {background-color:red;   }
.post.green  {background-color:green; }
.post.blue   {background-color:blue;  }
.post.yellow {background-color:yellow;}

Saya tidak memiliki blog demo untuk tutorial ini, tapi Saya sudah membuat ilustrasinya. Katakanlah semua elemen <article> pada ilustrasi ini adalah posting-posting yang ada di dalam blog Anda:

demo

Manipulasi ini setidaknya akan berjalan lancar pada posting yang hanya mengandung satu label saja dari semua nama label yang tercantum dalam kondisi. Jika tidak, hasilnya akan tidak terduga. Misalnya, jika kita telah menciptakan kondisi untuk posting dengan label Menyenangkan, Jelek, Bosan dan Mamamia, maka jika terdapat satu posting dengan label Menyenangkan dan Mamamia secara bersamaan, posting ini akan menunjukkan penanpilan yang tidak terduga.

Saya juga sudah menerapkan teknik ini di sini, namun tampak tidak begitu mencolok. Saya hanya memanfaatkannya untuk menandai setiap label Tingkatan Pembelajaran:

Navbar

Search This Blog

Friday, February 8, 2013

Macam -Macam Spoiler Macam -Macam Spoiler

Mengganti background area postingan dengan gambar dan animasi

Cara Membuat Blogazine Post Cara Membuat Blogazine Post

Wednesday, January 30, 2013

Thumbnail Effect With Zoom And Sliding Captions

Styling Striped TABLE Using Only CSS Styling Striped TABLE Using Only CSS

Tuesday, January 29, 2013

Cloud Zoom Is A Popular Fly-Out jQuery Cloud Zoom Is A Popular Fly-Out jQuery

Friday, January 25, 2013

daftar isi by logcyber daftar isi by logcyber

Tuesday, January 22, 2013

Cara membuat halaman utama tampil penuh Cara membuat halaman utama tampil penuh

Wednesday, January 2, 2013

JavaScript Popup Copy Code JavaScript Popup Copy Code

Markup HTML

semoga behasil......

Monday, December 31, 2012

Tampilan Posting Berbeda-Beda Berdasarkan Label

Musik