Tab View Empat Kolom

Tata Letak ------>  Elemen ---->


<div style="overflow:auto;width:445px;height:225px;
-webkit-box-shadow:0px 0px 45px red;-moz-box-shadow:0px 0px 55px red;
padding:10px;border:4px ridge  #FFA500 ">


<style type="text/css">

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 105px; /* Lebar Menu Utama Atas */

text-align: center;
height: 35px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 3px solid  #FF0000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color:  #F5FFFA; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color:   #F4A460; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 3px solid  #ffA500; /* Warna border Kotak Utama */
overflow: hidden;
background-color:  #ffff99 /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>




<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 450px;" class="Tabs">

<a class="Active" href="javascript:tabview_switch('TabView',%201);">JAM FLASH</a>

<a class="" href="javascript:tabview_switch('TabView',%202);">COMMEN POST</a>

<a class="" href="javascript:tabview_switch('TabView',%203);">TEMAN FB</a>

<a class="" href="javascript:tabview_switch('TabView',%204);">My Tweets</a>
</div>

<div style="width: 440px; height: 180px;" class="Pages">

<div style="overflow: auto; height: 200px; display: block;" class="Page">

<div class="Pad">
<li><a href=" #"><img src=" http://i40.tinypic.com/1zek2h0.gif " /> <div id="wpdc_embed_13118134511" style="display: none">Jam Garuda Indonesia</div><script src="http://www.widgipedia.com/embed/orido/Jam-Garuda-Indonesia_4639w-13118134511t-1311813451279i-0p.js"></script> </a></li>

</div>

</div>

<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">


<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://masolis-javascript.googlecode.com/svn/trunk/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://topotesa.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

</div>

</div>

<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">


<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/117573794621792660019/my-fb-friends.xml&amp;synd=open&amp;w=420&amp;h=100&amp;title=My+friends+on+Facebook&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+
%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js"></script>


</div>

</div>
<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">


<div style="background:#fff url(  http://i46.tinypic.com/y5no.jpg  ) no-repeat;padding-top:40px;padding-left:5px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(new TWTR.Widget({version:2,type:"profile",rpp:10,interval:3e3,width:450,height:130,theme:{shell:{background:"transparent",color:"#000000"},tweets:{background:"transparent",color:"#000000",links:"#B45F04"}},features:{scrollbar:true,loop:true,live:true,hashtags:true,timestamp:true,avatars:false,
behavior:"default"}})).render().setUser("moh_takdir").start()
</script>
</div>

</div>
</div>
</div>
</div></form>
<script type="text/javascript"><br/>
<br/>tabview_initialize('TabView');<br/><br/></script>



<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>


</div>

Rabaca Mpapola, lee...

Cara Membuat Gambar Membesar dan Berputar di Blog

Letakkan kode berikut ini dan letakkan diatas   ]]></b:skin>


.post img,table.tr-caption-container{border:none;max-width:560px;height:auto;-o-transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s} .post img:hover{opacity:1.0;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;-moz-box-shadow:1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F;-o-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-moz-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-webkit-transform:rotate(1460deg) scale(1.8) translate(35px,10px);-o-transition:margin-left 1.5s ease-in .4s margin-top 1.5s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;-moz-transition:margin 1.5s ease-in .4s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;-webkit-transition:margin 1.5s ease-in .4s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;margin:40px 0 20px 10px}

Rabaca Mpapola, lee...

Cara Membuat Foto Profil Berputar

 Copy dan Paste tepat diatas    ]]></b:skin>



/* Profile berputar by PapaUcup */
.profile-img{float:left;border:1px solid #330099;background-color:#FFFF00;box-shadow:0 1px 8px black;padding:4px;margin:0 5px 5px;border-radius:5px;-webkit-transition: all 2s ease-in-out;-moz-transition: all 2s ease-in-out;-o-transition: all 2s ease-in-out;-ms-transition: all 2s ease-in-out;transition: all 2s ease-in-out;}
.profile-img:hover{-moz-transform: scale(1.2) rotate(-1090deg);-webkit-transform: scale(1.2) rotate(-1090deg);-o-transform: scale(1.2) rotate(-1090deg);-ms-transform: scale(1.2) rotate(-1090deg);transform: scale(1.2) rotate(-1090deg);border:2px solid #FF0FE0;opacity:0.7;box-shadow:0 1px 8px white;}
.profile-data{margin:0}
.profile-datablock{margin:.5em 0}
.profile-textblock{margin:.5em 0}

Rabaca Mpapola, lee...

Cara Membuat Gambar Membesar

Letakkan diatas  ]]></b:skin>

.post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

Rabaca Mpapola, lee...

Cara Memasang Komentar Facebook di Blog

 Letakan ini diatas  ]]></b:skin>

<meta content='profil.sriwahyuni' property='fb:admins'/>
<meta content='259054834227698' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script src='http://panduan-template-blog-id.googlecode.com/files/CommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>





 Cari kode <div class='post-footer-line post-footer-line-3'/> dan tambahkan kode berikut tepat dibawah <div class='post-footer-line post-footer-line-3'/>





 <b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='fb-comments' data-num-posts='10' data-width='550' expr:data-href='data:post.url'/> 
</b:if>




Jangan lupa cantumkan  pada Tata Letak / Elemen Tambanan


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=418732184860386";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class="fb-comments" data-href="https://www.facebook.com/mohtakdir.tembandjobu" data-width="600" data-numposts="10" data-colorscheme="light"></div>

Rabaca Mpapola, lee...

Cara Membuat Kotak Komentar Tersembunyi

Copy dan letakkan diatas kode    ]]></b:skin>


a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVvIKSwhuyswnIb36JYQLQ20_Mhxvsv2yYuKw54MN4g-MgFn2uqrXoq61JAEZ91qodeABnEzSbJJX8OVLgGSCW9PEgtdh23WIDXMdNbJ-XEg9uB1mNmL3tcQaoa3GGj1sp1albKrwu1Dpe/s1600/topmenueva.jpg)repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#;}a.openpanel.active em {top:6px;border color:transparent transparent white transparent;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}





Kemudian Copy dan letakkan diatas tanda   </head>



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


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Buka Komentar",
    closePanelText      = "Tutup Lagi Komentarnya !",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://evawangi.googlecode.com/files/slidekomentar.js' type='text/javascript'/> 

 * Save dan lihat hasilnya

Rabaca Mpapola, lee...

Cara Memasang Background Gif dan Border pada Judul Postingan

Cari code seperti dibawah ini :

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  font-size:120%;
  text-decoration:none;
  color:#ff9933;
  font-weight:bold;


Letakkan Code dibawah ini tepat diatasnya :

.post h3 a{
     text-decoration:none;
     cursor:pointer;
     color: #8B0000   ;
     font:Arial 18px bold;
     display:block;
     border:6px ridge GoldenRod ;
     background: url(" http://i864.photobucket.com/albums/ab206/kibagus/animation/Misc-06-june.gif ") ;
     padding:2px 4px;
     }


Edit sandiri jo, bagaemana ngana pe mau ......  Okey, Selamat Mencoba ....

Rabaca Mpapola, lee...

Cara Memasang Icon Sebelum Judul Postingan

 Cari kode seperti ini :

 <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'>.......<data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

 Tambahkan kode gambar yang dimasukan :

<b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
           <a expr:href='data:post.url'>  <img border='0' src=' http://i41.tinypic.com/23lk3z4.jpg '/>  <data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Rabaca Mpapola, lee...

Cara Memberi Background Pada Judul Posting

By Fajar Lesmana on 10.17

---

Cara Memberi Background Pada Judul Posting - Sebelumnya saya sudah membahas bagaimana Cara Memberi Background Pada Judul Widget, nah sekarang saya akan membahas Bagaimana Cara Memberi Background Pada Judul Posting,tentunya dengan Cara Ini kamu bisa lebih mempercantik Blog kamu,
baiklah ini dia langkah-langkah yang harus kamu lakukan.

1. Login Ke Blog Kamu.
2. Pilih Rancangan,lalu pilih EDIT HTML.
3. Jangan Lupa Centang EXPAND WIDGET TEMPLATE.
4. Lalu Cari Kode ]]> jika tidak ada cari kode ]]></b:skin>
5. Setelah ketemu letakan Kode di bawah ini Tepat di Atas Kode Nomor 4.

.post h3 {
margin:.25em 0 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYqzC6vSkWdBZ1pBs84WHvdp-89OzbEaqd651IHA8SBqMsHJCsukgznmuRiOxgBaMxdQSXhNNIF7aNjLokPFhd_1h8uHbmK-RuGogq2_9cDRBSdYwSaX_-3LcL_6Bw8v0k9f3PmqjKcsFh/s1600/background-judul-posting.gif);
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;

6. Klik Dulu PERTINJAUAN, jika sudah berhasil Simpah Template.
7. Selsai deh.

SELAMAT MENCOBA

Rabaca Mpapola, lee...

Cara Membuat Lebel/Kategori di Postingan Blogger

Cara Membuat Label/Kategori di Postingan Blogger:

Pada saat Anda membuat sebuah artikel, lihat pada baigan kanan tempat postinganmu, disitu terdapat "Setelan entri". Nah pada bagian Label, silahkan kalian isi dengan nama label/kategori yang sesuai dengan kategori artikel Anda, misalnya Anda membuat artikel tentang Tutorial Blogger, maka isi pada label tersebut dengan Tutorial Blogger, atau tentang kesehatan, teknologi dll. Lihat gambar dibawah ini:

Jika sudah, klik Selesai. Lalu publikasikan artikel anda.

Rabaca Mpapola, lee...

Cara Membuat Recent Post Berjalan di Blog

Cara Membuat Recent Post Berjalan di Blog - Recent post atau dalam bahasa indonesianyaposting terakhir atau artikel terkini adalahwidget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
    
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
    
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>  

4. Klik save dan lihat hasilnya.

Kalau ini digunakan di blog saya ini, maka akan mempengaruhi salah satu Tooltib, makanya saya tidak gunakan disini.

Rabaca Mpapola, lee...

Cara Membuat Postingan Terpisah

Bagaimana sudah jelas bukan tentang kolom postingan terpisah? kalau sudah jelas mari kita lihat langkah-langkah pembuatannya

1. Login ke blogger
2. masuk ke Tata Letak => Edit HTML
   
   
   
3. lalu cari kode di bawah ini
   
   .post {
   ..............
   }
   
   
4. titik-titik di atas menunjukan ada kode yang terdapat di dalamnya kenapa saya tidak menunjukan-nya? karena setiap template kode yang dimaksud berbeda-beda
5. setelah ketemu ganti dengan kode di bawah ini
   
   .post {
   background:#fff url(http:// .................jpg.) repeat-x bottom;
   border:5px solid #000;
   margin:0 0 0.5em;
   padding:0.5em;
   color:#000;
   font-family:"Trebuchet MS";
   -moz-border-radius-topleft: 20px;
   }
   
   
   Penjelasan :
• fff : menunjukan warna latar belakang dari kolom postingan, sobat bisa menggantinya dengan kode warna yang lain
• http:// ..............jpg : menunjukan gambar yang berada di bawah kolom postingan, sobat juga dapat menggantinya tapi dengan ukuran yang kecil
• 000 : menunjukan dari warna garis pada kolom postingan terpisah, sobat bisa ganti akan tetapi harus di sesuaikan dengan warna main-wrapper agar terlihat terpisah
• 000 : warna dari tulisan pada klolom postingan, sobat dapat mengganti dengan warna yang berlawanan dengan warna latar belakang agar terlihat jelas

Rabaca Mpapola, lee...

Cara Pasang Read More Seperti di Blog ini

1. Silahkan anda Login ID Blogger anda

2. Silahkan Klik Rancangan --> Klik Edit HTML, centang pada kotak Expand Widget Template. 

3. Silahkan anda cari kode seperti ini </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ;summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://deddycamp.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Keterangan : Tulisan yang berwarna merah adalah yang bisa anda ganti.

• Summary noimg 430 = tinggi artikel terpenggal tanpa image
• Summar img 430 = tinggi artikel terpenggal dengan image

4. Cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='read more' src='   

http://i48.tinypic.com/2edbdxc.gif  '/></a></span>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Rabaca Mpapola, lee...