Sharing Mie

Percobaan Membuat jQuery ZooM Dan Grab tarik gambar

9/01/2012 09:53:00 AM Palma Hutabarat 0

.zoomIcon { width:33px; height:33px; position:absolute; top:0; right:0; background:url(/zoom/icon.png); } .zoom { display:inline-block; position:relative; } .z…

Membuat Menu Ribbon Menggunakan CSS

9/01/2012 09:42:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Pt sans narrow', sans-serif; font-size: 13px; line-height: 19px;"></span><br />
<div id="summary8169570151887548457">
<div style="text-align: center;">
<img alt="http://www.wpclipart.com/blanks/assorted/assorted_blanks_2/motto_ribbon.png" src="http://www.wpclipart.com/blanks/assorted/assorted_blanks_2/motto_ribbon.png" /></div>
<br />
Baiklah Pada kesempatan kali ini saya akan mencoba memberikan tutorial cara '<b>Membuat Menu Ribbon Menggunakan CSS</b>', dimana pada postingan saya yang lalu pernah juga memberikan beberapa menu navigasi keren yaitu '<a href="http://ut2a-4down.blogspot.com/2012/08/menu-navigasi-horizontal-dropdown-bag3.html" style="color: #aaaaaa; cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bqiEZwRfMmO7ouvDg34x_k8ZD2HG-rHlNSiXIDNRgi9JYgMSMywrYee7KdaAqo1gIXygNBIkBKYLBjVgA1pcNmtp0fbWbgJ-jGQax9vv3niLHJZAYiyJurhdDYPkT_34EXycGEqPifBY/s1600/ass.png), auto; text-decoration: none;" target="_blank"><b style="color: #bf9000;">Menu Navigasi Horizontal Dropdown Bag.3</b></a>'. menu ribbon ini memang terlihat sederhana. tetapi ketika cursor di arahkan ke menu tersebut maka akan terlhat lebih menarik. baiklah jika penasaran, silahkan arahkan kursor sobat ke menu ribbon dibawah ini.. :D<br />
<br />
<center>
<iframe class="demo" frameborder="0" src="http://www.jacklmoore.com/demo/ribbon.html?reload=3" style="height: 130px; width: 500px;"></iframe></center>
<br />
Gimana??? keren kan.hehee,.. untuk membuatnya sangat mudah koq, berikut ini kode yang di gunakan.<br />
<br />
<span style="font-size: medium;"><b>HTML::</b></span><br />
<br />
<blockquote class="tr_bq">
<div class='ribbon'><br />
    <a href='<span style="color: #6aa84f;">#</span>'><span>Home</span></a><br />
    <a href='<span style="color: #6aa84f;">#</span>'><span>About</span></a><br />
    <a href='<span style="color: #6aa84f;">#</span>'><span>Services</span></a><br />
    <a href='<span style="color: #6aa84f;">#</span>'><span>Contact</span></a><br />
</div></blockquote>
<br />
<span style="font-size: medium;"><b>CSS::</b></span><br />
<br />
<blockquote class="tr_bq">
.ribbon:after, .ribbon:before {<br />
    margin-top:0.5em;<br />
    content: "";<br />
    float:left;<br />
    border:1.5em solid #fff;<br />
}<br />
<br />
.ribbon:after {<br />
    border-right-color:transparent;<br />
}<br />
<br />
.ribbon:before {<br />
    border-left-color:transparent;<br />
}<br />
.ribbon a:link, .ribbon a:visited {<br />
    color:#000;<br />
    text-decoration:none;<br />
    float:left;<br />
    height:3.5em;<br />
    overflow:hidden;<br />
}<br />
.ribbon span {<br />
    background:#fff;<br />
    display:inline-block;<br />
    line-height:3em;<br />
    padding:0 1em;<br />
    margin-top:0.5em;<br />
    position:relative;<br />
<br />
    -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */<br />
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */<br />
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */<br />
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */<br />
    transition: background-color 0.2s, margin-top 0.2s;<br />
}<br />
<br />
.ribbon a:hover span {<br />
    background:#FFD204;<br />
    margin-top:0;<br />
}<br />
<br />
.ribbon span:before {<br />
    content: "";<br />
    position:absolute;<br />
    top:3em;<br />
    left:0;<br />
    border-right:0.5em solid #9B8651;<br />
    border-bottom:0.5em solid #fff;<br />
}<br />
<br />
.ribbon span:after {<br />
    content: "";<br />
    position:absolute;<br />
    top:3em;<br />
    right:0;<br />
    border-left:0.5em solid #9B8651;<br />
    border-bottom:0.5em solid #fff;<br />
}</blockquote>
<br />
<br />
<br />
Jgn malu tuk meninggalkan komentar sobat jika msh kurang paham.OKE..!! Good luck.<br />
<br />
<div style="text-align: center;">
<b>Selamat Mencoba!</b></div>
</div>
<br />
<div align="left" style="color: #bbbbbb; font: normal normal normal 15px/normal lobster; text-shadow: rgb(0, 0, 0) 0px -1px 2px;">
Original Posted by : <a href="http://ut2a-down.blogspot.com/" style="color: #aaaaaa; cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bqiEZwRfMmO7ouvDg34x_k8ZD2HG-rHlNSiXIDNRgi9JYgMSMywrYee7KdaAqo1gIXygNBIkBKYLBjVgA1pcNmtp0fbWbgJ-jGQax9vv3niLHJZAYiyJurhdDYPkT_34EXycGEqPifBY/s1600/ass.png), auto; text-decoration: none;">akaUTta...</a></div>
<div align="left" style="color: #bbbbbb; font: normal normal normal 15px/normal lobster; text-shadow: rgb(0, 0, 0) 0px -1px 2px;">
<br /></div>
<div align="left" style="color: #bbbbbb; font: normal normal normal 15px/normal lobster; text-shadow: rgb(0, 0, 0) 0px -1px 2px;">
<a href="http://ut2a-4down.blogspot.com/2012/08/menu-ribbon-with-css.html#ixzz25EkKmf4u" target="blank"><button>aKaUTta.Original</button></a></div>
<br /></div>

aKaUTta Blogger CSS HTML Javascript jQuery SeputarBerita Tips'N'Trik Membuat Menu Ribbon Menggunakan CSS

Baiklah Pada kesempatan kali ini saya akan mencoba memberikan tutorial cara 'Membuat Menu Ribbon Menggunakan CSS', dimana pada postingan saya yang lalu pernah juga memberikan beberapa menu navigasi keren yaitu 'Menu Navigasi Horizontal Dropdown Bag.…

Membuat Image Hover Zoom With jQuery

9/01/2012 09:28:00 AM Palma Hutabarat 0

aKaUTta Blogger CSS HTML Javascript jQuery SeputarBerita Tips'N'Trik Membuat Image Hover Zoom With jQuery

Met Sore All,.. Kali ini saya akan mencoba memberikan trik 'Membuat Image Hover Zoom With jQuery'.langsung saja ke TKP. :p Contoh bisa sobat klik disini... CSS:: .zoomIcon {width:33px;height:33px; position:absolute;top:0;right:0;background:url(http…

Cara Membuat Effect Sliding Door With CSS

9/01/2012 09:24:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Pt sans narrow', sans-serif; font-size: 13px; line-height: 19px;"></span><br />
<div id="summary4879238993258624285">
<div style="text-align: center;">
<img alt="http://i1243.photobucket.com/albums/gg551/NikkTyagi/css3Logo.png" src="http://i1243.photobucket.com/albums/gg551/NikkTyagi/css3Logo.png" /></div>
<br />
Kali ini saya akan memberikan tutorial '<b>Cara Membuat Effect Sliding Door With CSS</b>'. Saya tidak tahu harus memberi nama apa efek ini, karena efek ini seperti sebuah pintu geser  yang dibuka maka saya namakan efek ini ”sliding door”. :D<br />
<br />
Saya hanya menggunakan CSS yang cukup sederhana, 'class <b>coveraka</b>', dan 'class <b>left</b> dan <b>right</b>' untuk content.<br />
<br />
<span style="font-size: medium;"><b>HTML::</b></span><br />
<br />
<blockquote class="tr_bq">
<div class="coveraka"><br />
  <div class="left_gate"></div><br />
  <div class="right_gate"></div><br />
<br />
  <p><span style="color: #bf9000;">Isi Content ato Teks Anda Disini</span></p><br />
<br />
</div><br />
<br />
<div class="coveraka slide_in"><br />
  <div class="left_gate"></div><br />
  <div class="right_gate"></div><br />
<br />
<p><span style="color: #bf9000;">Isi Content ato Teks Anda Disini</span></p><br />
<br />
</div></blockquote>
<br />
<span style="font-size: medium;"><b>CSS::</b></span><br />
<br />
<blockquote class="tr_bq">
.coveraka {<br />
position: relative;<br />
width: <span style="color: #cc0000;">200px</span>;<br />
height: <span style="color: #cc0000;">200px</span>;<br />
margin: 20px auto;<br />
background-color: #eee;<br />
z-index: 1;<br />
<br />
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);<br />
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);<br />
box-shadow: 0 2px 10px rgba(0,0,0,0.3);<br />
}<br />
.coveraka p {color:black;<br />
text-align:center;<br />
margin: 0;<br />
}<br />
.left_gate {<br />
position: absolute;<br />
background: #41B5F0;<br />
bottom: 0; right: 50%; left: 0; top: 0;<br />
<br />
-webkit-transition: all 0.5s ease-out;<br />
-moz-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
-o-transition:all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}<br />
.coveraka:hover .left_gate {<br />
right: 100%; left: -50%;<br />
}<br />
.right_gate {<br />
position:absolute;<br />
background:#0C5CA3;<br />
bottom: 0;<br />
left: 50%;<br />
right:0;top:0;<br />
<br />
-webkit-transition: all 0.5s ease-out;<br />
-moz-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
}<br />
.coveraka:hover .right_gate {<br />
left: 100%; right: -50%;<br />
}<br />
.slide_in {<br />
overflow:hidden;<br />
}<br />
.slide_in .left_gate {<br />
background: #0C5CA3;<br />
}<br />
.slide_in .right_gate {<br />
background: #41B5F0;<br />
}</blockquote>
<br />
<b><span style="color: #38761d;">DAN HASILNYA ::</span></b><br />
<br />
<div class="coveraka" style="-webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 2px 10px; background-color: #eeeeee; box-shadow: rgba(0, 0, 0, 0.296875) 0px 2px 10px; height: 200px; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; position: relative; width: 200px; z-index: 1;">
<div class="left_gate" style="-webkit-transition-delay: initial; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease-out; background-attachment: initial; background-clip: initial; background-color: #41b5f0; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; bottom: 0px; left: 0px; position: absolute; right: 50%; top: 0px;">
</div>
<div class="right_gate" style="-webkit-transition-delay: initial; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease-out; background-attachment: initial; background-clip: initial; background-color: #0c5ca3; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; bottom: 0px; left: 50%; position: absolute; right: 0px; top: 0px;">
</div>
<br />
<div style="color: black; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: center;">
Effect Sliding Doors With CSS!</div>
</div>
<div class="coveraka slide_in" style="-webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 2px 10px; background-color: #eeeeee; box-shadow: rgba(0, 0, 0, 0.296875) 0px 2px 10px; height: 200px; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; overflow-x: hidden; overflow-y: hidden; position: relative; width: 200px; z-index: 1;">
<div class="left_gate" style="-webkit-transition-delay: initial; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease-out; background-attachment: initial; background-clip: initial; background-color: #0c5ca3; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; bottom: 0px; left: 0px; position: absolute; right: 50%; top: 0px;">
</div>
<div class="right_gate" style="-webkit-transition-delay: initial; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease-out; background-attachment: initial; background-clip: initial; background-color: #41b5f0; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; bottom: 0px; left: 50%; position: absolute; right: 0px; top: 0px;">
</div>
<br />
<div style="color: black; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: center;">
Effect Sliding Doors With CSS!</div>
</div>
<br />
<div style="text-align: center;">
Selesai !  dan Semoga bermanfaat.</div>
</div>
<br />
<div align="left" style="color: #bbbbbb; font: normal normal normal 15px/normal lobster; text-shadow: rgb(0, 0, 0) 0px -1px 2px;">
Original Posted by : <a href="http://ut2a-down.blogspot.com/" style="color: #aaaaaa; cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bqiEZwRfMmO7ouvDg34x_k8ZD2HG-rHlNSiXIDNRgi9JYgMSMywrYee7KdaAqo1gIXygNBIkBKYLBjVgA1pcNmtp0fbWbgJ-jGQax9vv3niLHJZAYiyJurhdDYPkT_34EXycGEqPifBY/s1600/ass.png), auto; text-decoration: none;">akaUTta...</a><br />
<br /></div>
<a href="http://ut2a-4down.blogspot.com/2012/08/cara-membuat-effect-sliding-door-with.html#ixzz25EfY7x8N" target="blank"><button>aKaUTta.Original</button></a><br />
<br /></div>

aKaUTta Blogger CSS HTML SeputarBerita Tips'N'Trik Cara Membuat Effect Sliding Door With CSS

Kali ini saya akan memberikan tutorial 'Cara Membuat Effect Sliding Door With CSS'. Saya tidak tahu harus memberi nama apa efek ini, karena efek ini seperti sebuah pintu geser yang dibuka maka saya namakan efek ini ”sliding door”. :D Saya hanya men…

Mempercantik Popular Posts With Thumbs dan Summary ala akaUTta

9/01/2012 09:08:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="color: orange; font-size: large;"><i><span class="Apple-style-span" style="font-family: 'Pt sans narrow', sans-serif; line-height: 19px;"></span><br /></i></span>
<br />
<div id="summary3689048229797340706">
<b><span class="Apple-style-span" style="color: orange; font-size: large;"><i>SalamBloggerIndonesia</i></span></b><br />
Pada kesempatan kali ini saya akan memberikan tutorial yaitu cara '<b>Mempercantik Popular Posts With Thumbs dan Summary</b>'. dimana pada postingan aKaUTta yang lalu pernah juga membahas cara '<a href="http://ut2a-4down.blogspot.com/2012/08/mempercantik-popular-posts-with-thumbs.html" style="color: #aaaaaa; cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bqiEZwRfMmO7ouvDg34x_k8ZD2HG-rHlNSiXIDNRgi9JYgMSMywrYee7KdaAqo1gIXygNBIkBKYLBjVgA1pcNmtp0fbWbgJ-jGQax9vv3niLHJZAYiyJurhdDYPkT_34EXycGEqPifBY/s1600/ass.png), auto; text-decoration: none;" target="_blank"><span style="color: #b45f06;"><b>Mempercantik Popular Posts With Thumbs</b></span></a>'. sebenarnya script ini sama saja dengan tutorial saya lalu, cuma disini saya hanya menambahkan summary (snippet) pada populart post ini, selain summary juga sdh menambahkan <b>DEFAULT IMAGE</b> yang artinya artikel populart yang tidak memiliki thumb (secara default). akan menampilkan image default secara otomatis.<br />
<br />
Baiklah langsung aj deh,dan berikut contohnya :<br />
<br />
<br />
<div style="text-align: center;">
<img alt="http://picturestack.com/505/204/B5Qut2a4downCKA.jpg" src="http://picturestack.com/505/204/B5Qut2a4downCKA.jpg" /></div>
<br />
Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :<br />
<br />
<br />
<br />
<br />
<div>
<ol style="list-style-image: initial; list-style-position: initial; list-style-type: none;">Seperti biasa terlebih dahulu :
<li>Login blogger.</li>
<li>Rancangan, <b style="color: red;">Edit Html</b>, Cari kode <b style="color: red; font-family: 'Courier New', Courier, monospace;"><i style="color: red;">]]></b:skin></i></b></li>
<li>Dan Letakkan kode berikut diatasnya :</li>
</ol>
</div>
<a href="http://ut2a-4down.blogspot.com/2012/03/membuat-effect-gambar-pecah-with-jquery.html" name="more" style="color: #aaaaaa; cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bqiEZwRfMmO7ouvDg34x_k8ZD2HG-rHlNSiXIDNRgi9JYgMSMywrYee7KdaAqo1gIXygNBIkBKYLBjVgA1pcNmtp0fbWbgJ-jGQax9vv3niLHJZAYiyJurhdDYPkT_34EXycGEqPifBY/s1600/ass.png), auto; text-decoration: none;"></a><br />
<form name="copy">
<div align="center">
<input onclick="javascript: this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div>
<div class="codebox">
<div class="codebox2">
<div style="color: blue; text-align: center;">
<span style="font-size: small;">www.palmahutabarat.co.cc</span></div>
<style type="text/css"> .codebox{ border: 2px solid #9900FF; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; background:#00FFFF; padding:20px;} </style> <textarea cols="90%" dir="ltr" name="txt" rows="8px" style="width: 100%;">/*Popular Posts*/
#PopularPosts1 img{float:left;width:82px;height:82px;opacity:0.8;padding:2px;margin-right:5px;
-moz-box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
-ms-box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
-o-box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
-webkit-box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
box-shadow:0 0 1px #C0C0C0,1px 1px 1px #aaa;
border:2px solid #eee;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;}

#PopularPosts1 img:hover{cursor:move;opacity:1.1;border:2px solid #222;border-right:2px solid #00684C;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-bottom:2px solid #00684C;}

#PopularPosts1 ul{padding:0;overflow:none;margin:0;}
#PopularPosts1 .widget-content{text-align:justify;
}
#PopularPosts1 ul li{
background:none;border-bottom:1px dotted #ccc;
padding:5px 0;
}
#PopularPosts1 .item-title {}
#PopularPosts1 .item-title a {
font-weight:bold;margin-top:0;
}
#PopularPosts1 .item-snippet {font-family:'Comfortaa';color:#06513E;
}

-Kode warna merah (kalo ada, hehee ) diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.

4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

http://picturestack.com/509/223/C0NpopularakaS2B.jpg

6. Setelah langkah diatas selesai, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Setelah ketemu, ganti dengan kode berikut ini :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2>
<data:title/></h2>
</b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
<li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
</b:if>
              <div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://picturestack.com/228/804/rP7noimagegzi.jpg'/></a>
              </b:if>
              <div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</div>
<div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
</b:loop>
    </ul>
<b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

www.palmahutabarat.co.cc

8. Terakhir Simpan Template.

Demikian tadi tutorial Mempercantik Popular Posts With Thumbs dan Summary, jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar yang tersedia, maaf jika saya kurang baik menyelaskannya. :D selamat mencoba dan semoga bermanfaat.!!

Original Posted by : akaUTta...

undefinedMempercantik Popular Posts With Thumbs dan Summary ala akaUTta

SalamBloggerIndonesia Pada kesempatan kali ini saya akan memberikan tutorial yaitu cara 'Mempercantik Popular Posts With Thumbs dan Summary'. dimana pada postingan aKaUTta yang lalu pernah juga membahas cara 'Mempercantik Popular Posts With Thumbs'.…

Cara Membuat Tombol Back To Top di Blog Versi Apa Aja Boyeh

8/31/2012 12:52:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj20AOKMlnsRCiBHXf-pgTlRqQYVqsnMswDbQlAG7AI4xKUaNytX75oAMaGCj2GTgqtjZfwE0WJx0ckZSRFQ24QZbT4woMVVVha_3NEdsjZQlfo8KzpRkQfvfR1QDahGOXApYIzyGYTuHM8/s1600/back_to_top_button.png" imageanchor="1" style="color: #0052a3; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><br class="Apple-interchange-newline" /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj20AOKMlnsRCiBHXf-pgTlRqQYVqsnMswDbQlAG7AI4xKUaNytX75oAMaGCj2GTgqtjZfwE0WJx0ckZSRFQ24QZbT4woMVVVha_3NEdsjZQlfo8KzpRkQfvfR1QDahGOXApYIzyGYTuHM8/s1600/back_to_top_button.png" style="border: 0px solid rgb(204, 204, 204); padding: 2px;" /></span></a></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span><span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">Selamat pagi sobat blogger, saya sudah pernah berbagi tips <a href="http://www.rieztoshare.com/2012/05/cara-membuat-tombol-back-to-top-di-blog.html" style="color: #0052a3; text-decoration: none;" target="_blank">membuat tombol back to top di blog</a>, nah maka dari itu saya namakan postingan kali ini Versi 2.</span><br />
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span><span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">Pada dasarnya pembuatannya sama saja dengan yang <a href="http://www.rieztoshare.com/2012/05/cara-membuat-tombol-back-to-top-di-blog.html" style="color: #0052a3; text-decoration: none;" target="_blank">versi sebelumnya</a> hanya saja disini scriptnya lebih singkat dan ada sedikit perubahan gambar, yaps gambar arah panah yang ke atas, gambar tersebut bisa sobat pilih sesuka hati.</span><br />
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span><span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">Berikut cara membuatnya.</span><br />
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">1. Login blog sobat.</span><br />
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">2. Masuk menu Template.</span><br />
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">3. Pilih Edit HTML, klik Lanjutkan.</span><br />
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;">4. Cari kode <b></body></b>, selanjutnya letakkan kode dibawah ini tepat diatas kode <b></body></b> tadi.</span><br />
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span>
<div class="alert" style="background-color: #dde4ff; border: 2px solid rgb(132, 132, 132); color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px; padding: 10px;">
<span style="font-family: Arial, Helvetica, sans-serif;"><i><a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='<span style="color: red;">Back to Top</span>'><img alt='<span style="color: magenta;">Back to Top</span>' border='0'src='<span style="color: blue;">alamat url gambar Back to Top-mu</span>'/></a></i></span></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span><b style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"><span style="font-family: Arial, Helvetica, sans-serif;">NB :</span></b><br />
<ul style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Sobat bisa mengganti teks yang berwarna <span style="color: red;">merah</span> diatas dengan kata-kata sobat sendiri, misalnya 'return to top', 'kembali ke atas', 'balik ke atas', 'meluncur ke atas', 'balikan nyook', atau 'kembali ke laptop'... atau apa-lah terserah sobat, asal fungsinya masih ada kaitannya dengan back to top.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Kemudian yang berwarna <span style="color: magenta;">ungu</span> itu adalah teks sebagai pengganti gambar apabila gambar tidak dapat dimuat dalam browser.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Lalu yang berwarna <span style="color: blue;">biru</span> adalah alamat url gambar sobat, sobat bisa download salah satu gambar dibawah ini, kemudian upload dan host sendiri gambarnya, misalnya di<a href="http://photobucket.com/" style="color: #0052a3; text-decoration: none;" target="_blank">photobucket</a>. </span></li>
</ul>
<div style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Contoh beberapa gambar back to top</span></b></div>
<div style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;">
<b><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></b></div>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqJu7bnS1dAjdCrw3N4fZfNlqWpVN9YAvWGm_sC_NnkOAuiufeArqN-Ver4409d5_XO65gcW9TBvniccM5LRqpxseTsBTc50xF4mywigK11D1x8Kr2S36dzUvsSQV1EbVT60emPK9SY58/s1600/top1.png" imageanchor="1" style="color: #0052a3; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqJu7bnS1dAjdCrw3N4fZfNlqWpVN9YAvWGm_sC_NnkOAuiufeArqN-Ver4409d5_XO65gcW9TBvniccM5LRqpxseTsBTc50xF4mywigK11D1x8Kr2S36dzUvsSQV1EbVT60emPK9SY58/s1600/top1.png" style="border: 0px solid rgb(204, 204, 204); padding: 2px;" /></span></a></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVegyzbIXgG59c4AUurxfEE6qNewg9WHXAPm5tmlZG-9L3kIklajxjSOoPNdJoOY4ve__Tfp0vFu_V9MYxQ49xFA2BX1egOFDxCZhe_3OjlAXx7n0o0Ua4s1g0NopgqPWa27Ycl6W3Nl5g/s1600/top2.png" imageanchor="1" style="color: #0052a3; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVegyzbIXgG59c4AUurxfEE6qNewg9WHXAPm5tmlZG-9L3kIklajxjSOoPNdJoOY4ve__Tfp0vFu_V9MYxQ49xFA2BX1egOFDxCZhe_3OjlAXx7n0o0Ua4s1g0NopgqPWa27Ycl6W3Nl5g/s1600/top2.png" style="border: 0px solid rgb(204, 204, 204); padding: 2px;" /></span></a></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv6fL-lmCbrsHqEAz6hY1i9AtjN5PQlqGlgHFyP7MzurwsG8gl6QcSe6nxeUQqx1z0ydadmNnVlNZUFv2JnWWhCmAnTr0Cg4uz-bMuPl131luucNCKnXX8Fr02XcyQfI8pKwKmb0YWDhyphenhyphenM/s1600/top3.png" imageanchor="1" style="color: #0052a3; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv6fL-lmCbrsHqEAz6hY1i9AtjN5PQlqGlgHFyP7MzurwsG8gl6QcSe6nxeUQqx1z0ydadmNnVlNZUFv2JnWWhCmAnTr0Cg4uz-bMuPl131luucNCKnXX8Fr02XcyQfI8pKwKmb0YWDhyphenhyphenM/s1600/top3.png" style="border: 0px solid rgb(204, 204, 204); padding: 2px;" /></span></a></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqA0QoHfoY8z-ctyrZda1hRTI5HwyIDSNt1V2GOY6S5nJuEcKVEgqhKjCQuc9HyjiZlTkAwWdcFtL4LwziyzSUr_Dz7tmnalcsoY-NyMX_igCScKwI8jCAcDtG7OZg4TzczgQd_g9cY3mI/s1600/top4.png" imageanchor="1" style="color: #0052a3; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqA0QoHfoY8z-ctyrZda1hRTI5HwyIDSNt1V2GOY6S5nJuEcKVEgqhKjCQuc9HyjiZlTkAwWdcFtL4LwziyzSUr_Dz7tmnalcsoY-NyMX_igCScKwI8jCAcDtG7OZg4TzczgQd_g9cY3mI/s1600/top4.png" style="border: 0px solid rgb(204, 204, 204); padding: 2px;" /></span></a></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiocvVxHVyjK59hteWhTc0i3pz9Gd66A1ySfBtfg4JxNn19tvbwWNj6-j6FlD3A4p3wl46doUfsmYaGMoGflfr0iOApxMBR6hwyGyKrIUSG0DEL0y0l9WvcOnoagXbngOaF6ccEPdvVI6LC/s1600/top5.png" imageanchor="1" style="color: #0052a3; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiocvVxHVyjK59hteWhTc0i3pz9Gd66A1ySfBtfg4JxNn19tvbwWNj6-j6FlD3A4p3wl46doUfsmYaGMoGflfr0iOApxMBR6hwyGyKrIUSG0DEL0y0l9WvcOnoagXbngOaF6ccEPdvVI6LC/s1600/top5.png" style="border: 0px solid rgb(204, 204, 204); padding: 2px;" /></span></a></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbr90rB99x9ygeHrnfPygy4QmwIRwQtZM-6SjPxaaU59lSVp6fpxj1ND-pO6R0HBEfEzom8vJcmpGcLV29GzY4C1WCIaGWYpNyXmpSrKTqiltCUeW2c9p4YuWfOldTGRbTFS6FBhlbtj5/s1600/top6.png" imageanchor="1" style="color: #0052a3; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbr90rB99x9ygeHrnfPygy4QmwIRwQtZM-6SjPxaaU59lSVp6fpxj1ND-pO6R0HBEfEzom8vJcmpGcLV29GzY4C1WCIaGWYpNyXmpSrKTqiltCUeW2c9p4YuWfOldTGRbTFS6FBhlbtj5/s1600/top6.png" style="border: 0px solid rgb(204, 204, 204); padding: 2px;" /></span></a></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.383333206176758px;"><br /></span><span style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;"></span>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;">
<b><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></b></div>
<div style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;">
<span style="font-family: Arial, Helvetica, sans-serif;">5. Yang terakhir, simpan Template.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">6. Kemudian lihat hasilnya dan nikmati Top Button buatan sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Arial, Helvetica, sans-serif;">Udah dulu ya sob, semoga tips blogging ini bermanfaat dan terimakasih.</span></div>
<div style="background-color: white; color: #333333; font-family: arial; font-size: 14px; line-height: 22.383333206176758px;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><i>script by : <a href="http://buka-rahasia.blogspot.com/2011/04/fitur-back-to-top-blogger-blogspot.html" style="color: #0052a3; text-decoration: none;" target="_blank">bukan rahasia lagi</a></i></span></div>
</div>

CSS Javascript SeputarBerita Tips'N'Trik Cara Membuat Tombol Back To Top di Blog Versi Apa Aja Boyeh

Selamat pagi sobat blogger, saya sudah pernah berbagi tips membuat tombol back to top di blog, nah maka dari itu saya namakan postingan kali ini Versi 2. Pada dasarnya pembuatannya sama saja dengan yang versi sebelumnya hanya saja disini scriptnya l…

6 Langkah Untuk Membuat Blog Terkenal

8/31/2012 12:50:00 AM Palma Hutabarat 0

Blogger SeputarBerita 6 Langkah Untuk Membuat Blog Terkenal

Menurut pendapat saya, blogging akan terasa membosankan ketika tidak ada satu orang pun yang membaca apa yang sudah kita tulis. Tidak sia-sia rasanya jika tulisan kita banyak dibaca orang. Selain tulisan yang bermanfaat dan informatif juga ada cara …

Cara Membuat Tombol di Blog Blogspot - Cara Mudah Buat Button

8/31/2012 12:48:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px;">Cara membuat tombol untuk blog blogger</span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> sangatlah gampang, karena kita hanya membutuhkan beberapa kode HTML yang amat singkat. Beberapa tujuan pembuatan tombol atau button ini hanya agar tampilan tulisan maupun link yang kita sediakan terlihat lebih menarik. Selain itu dengan tampilan tombol akan terlihat lebih unik daripada hanya sekedar tulisan saja.</span><a href="http://www.blogger.com/blogger.g?blogID=1605295280294105532" name="more" style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"></a><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Sebagai contoh, berikut adalah tulisan yang dibentuk dengan gaya tombol/button namun tidak mengandung link</span><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<button style="font-size: 13px;">Belajar Membuat Blog di Blogger</button><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Untuk membuat tombol di atas, anda hanya membutuhkan kode berikut</span><br />
<br />
<div class="alert" style="background-color: #f4f4f4; border: 1px dotted rgb(34, 51, 68); color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; padding: 5px;">
<button><span style="color: #ff6600;">Belajar Membuat Blog di Blogger</span></button></div>
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Lalu, jika anda ingin membuat tombol yang terdapat teks dan link di dalamnya seperti berikut (diklik ya, biar tahu bedanya => santai, Link akan mengarah ke postingan ini)</span><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<a href="http://t4belajarblogger.blogspot.com/2010/05/cara-membuat-tombol-di-blog-blogspot.html" style="background-color: white; color: #0c343d; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: none;"><button>Belajar Membuat Blog di Blogger</button></a><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Maka kode yang anda perlukan untuk membuat tampilan tombol dengan teks plus link yaitu sebagai berikut</span><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<div class="alert" style="background-color: #f4f4f4; border: 1px dotted rgb(34, 51, 68); color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; padding: 5px;">
<a href="<span style="color: #3333ff;">http://t4belajarblogger.blogspot.com/2010/05/cara-membuat-tombol-di-blog-blogspot.html</span>"><button><span style="color: #ff6600;">Belajar Membuat Blog di Blogger</span></button></a></div>
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Jika anda ingin membuat agar </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px;">linknya terbuka di tab baru</span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">, maka anda harus menggunakan kode berikut</span><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<div class="alert" style="background-color: #f4f4f4; border: 1px dotted rgb(34, 51, 68); color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; padding: 5px;">
<a href="<span style="color: #3333ff;">http://t4belajarblogger.blogspot.com/2010/05/cara-membuat-tombol-di-blog-blogspot.html</span>" target="blank"><button><span style="color: #ff6600;">Belajar Membuat Blog di Blogger</span></button></a></div>
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Dan berikutlah hasilnya (klik yaaa...):</span><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<a href="http://t4belajarblogger.blogspot.com/2010/05/cara-membuat-tombol-di-blog-blogspot.html" style="background-color: white; color: #0c343d; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: none;" target="blank"><button>Belajar Membuat Blog di Blogger</button></a><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Oh ya, teman-teman bisa menggunakan tombol ini di dalam postingan maupun di halaman depan blog (sidebar, header, footer, dll). Bagi teman-teman yang belum tahu tentang cara penggunaannya untuk halaman depan, silahkan diperaktekkan melalui langkah-langkah berikut:</span><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px;">1</span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">. Login dulu ke Blogger</span><br />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px;">2</span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">. Klik menu </span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px;">Tata Letak</span><br />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px;">3</span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">. Klik </span><span style="background-color: white; color: #3333ff; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Tambah Gadget</span><br />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px;">4</span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">. Isikan kolom kosong dengan kode tombol/buttton pilihan anda</span><br />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px;">5</span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">. Klik </span><span style="background-color: white; color: #ff6600; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">simpan</span><span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">, dan selesai...silahkan lihat hasilnya di blog anda</span><br />
<br style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Semoga bermanfaat_</span><br />
<br />
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: white; color: #59594f; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; line-height: 18px;"><span style="font-size: xx-small;">copyright@<a href="http://www.muhbalak.com/2010/05/cara-membuat-tombol-di-blog-blogspot.html" target="_blank">Muhbalak</a></span></span></div>

Blogger Javascript SeputarBerita Tips'N'Trik Cara Membuat Tombol di Blog Blogspot - Cara Mudah Buat Button

Cara membuat tombol untuk blog blogger sangatlah gampang, karena kita hanya membutuhkan beberapa kode HTML yang amat singkat. Beberapa tujuan pembuatan tombol atau button ini hanya agar tampilan tulisan maupun link yang kita sediakan terlihat lebih …

Cara Membuat Footer Melayang Atau Strip Footer

8/30/2012 05:53:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-size: x-small;"></span><br />
<div style="text-align: justify;">
Salah satu Tips untuk memikat pengunjung bukan hanya pada artikel kalian tapi penampilan Blog Kalian merupakan pandangan pertama yang dapat memikat mereka. Jika Kalian merasa Blog Kalian belum tampil menarik maka Tips yang satu ini akan membuatnya lebih menarik. Pada kesempatan ini Saya akan mengajarkan Tips untuk membuat Footer Bar yang statis. Footer Bar akan selalu muncul walaupun Kalian mengscroll ke bawah halaman. Pada Footer Bar atau strip Footer ini Kalian dapat memasang Iklan atau pun pesan kepada pengunjung. Tentunya pengunjung akan mudah melihat pesan tersebut apabila mereka mendatangi Blog Kalian.</div>
<div style="text-align: justify;">
</div>
Jika Kalian merasa tertarik untuk membuatnya. Maka ikuti langkah-langkah berikut :<br />
<br />
<b>[1].</b> Seperti biasa Login dulu ke Blog Kalian<br />
<b>[2].</b> Lalu pilih Tata Letak Klik Edit HTML<br />
<b>[3].</b> Centan Expand Widget Template<span class="fullpost"><br /><b>[4].</b> Cari Code "<b><span style="color: red;">]]></b:skin></span></b>" (Tanpa Tanda Petik) dan Paste Code di bawah sebelum Code tadi</span><br />
<blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 20px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 2px; color: black; line-height: 1.6em; margin-bottom: 10px; margin-left: 20px; margin-right: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; padding-top: 10px;">
<div style="color: lime;">
<b><span class="fullpost">#navbar-footer p.info {</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">float: right;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">padding-right:40px;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">line-height: 1.2;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">height: 100%;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">vertical-align: bottom;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">}</span></b></div>
<div style="color: lime;">
<b><span class="fullpost"><br /></span></b></div>
<div style="color: lime;">
<b><span class="fullpost">#navbar-footer p {</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">float: left;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">margin: 0px;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">padding-top:4px;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">padding-left:40px;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">vertical-align: bottom;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">line-height: 1.2;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">}</span></b></div>
<div style="color: lime;">
<b><span class="fullpost"><br /></span></b></div>
<div style="color: lime;">
<b><span class="fullpost">#navbar-footer a {</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">color: #333;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">}</span></b></div>
<div style="color: lime;">
<b><span class="fullpost"><br /></span></b></div>
<div style="color: lime;">
<b><span class="fullpost">#navbar-footer {</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">align: center;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">position: fixed;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">border-top: 1px solid #ddd;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">border-bottom: 10px solid #f5f5f5;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">background-color: #f5f5f5;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">width: 100%;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">left: 0px;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">text-align: left;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">color: #888;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">font-family: Verdana;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">font-size: 11px;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">z-index:10000;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">opacity: 0.9;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">filter: alpha(opacity: 90);</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">bottom:0;</span></b></div>
<div style="color: lime;">
<b><span class="fullpost">}</span></b></div>
</blockquote>
<span class="fullpost"></span><br />
<span class="fullpost"><b>[5]. </b>Kemudian Copy dan Paste-kan Code di bawah sebelum Code "<b><span style="color: red;"></body></span></b>" (Tanpa Tanda Petik)</span><br />
<blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 20px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 2px; line-height: 1.6em; margin-bottom: 10px; margin-left: 20px; margin-right: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; padding-top: 10px;">
<b style="color: black;"><span style="color: lime;"><div id='navbar-footer'></span></b><br />
<div style="color: lime;">
<b><p></b></div>
<div style="color: lime;">
<b>Agar <a href='http://www.blogger.com'><span class="Apple-style-span" style="color: black; font-weight: normal;"><b></b></span></b><br />
<div class="GFUPJP0PW" style="font-family: Arial, sans-serif; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 264px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<h3 style="-webkit-transition-delay: 0.2s; -webkit-transition-duration: 0.2s; -webkit-transition-property: all; -webkit-transition-timing-function: initial; font-family: 'Open Sans', arial, sans-serif; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 430px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap;">
<b><span class="Apple-style-span" style="color: black; font-weight: normal;"><b>
<span class="Apple-style-span" style="color: red; font-size: small;">Sharing[̶̲̅ Blog Just4U</span></b></span></b></h3>
</div>
<b><span class="Apple-style-span" style="color: black; font-weight: normal;"><b>
</b></span></a> <span style="color: red;">lebih bermanfaat dan menarik lagi,</span><br/> <span style="color: red;">diharap anda dapat meninggalkan komentar....</span></b></div>
<div style="color: lime;">
<b></p></b></div>
<div>
<b><span class="Apple-style-span" style="color: lime;"><p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> | Created by <a href='http://www.facebook.com/</span><span style="color: red;">Freerap69</span><span class="Apple-style-span" style="color: lime;">?ref=profile' target='_blank'></span><span class="Apple-style-span" style="color: lime;"><span class="Apple-style-span" style="color: black; font-weight: normal;"><b></b></span></span></b><br />
<div class="GFUPJP0PW" style="font-family: Arial, sans-serif; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 264px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<h3 style="-webkit-transition-delay: 0.2s; -webkit-transition-duration: 0.2s; -webkit-transition-property: all; -webkit-transition-timing-function: initial; font-family: 'Open Sans', arial, sans-serif; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 430px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap;">
<b><span class="Apple-style-span" style="color: lime;"><span class="Apple-style-span" style="color: black; font-weight: normal;"><b>
<span class="Apple-style-span" style="color: red; font-size: small;">Sharing[̶̲̅ Blog Just4U</span></b></span></span></b></h3>
</div>
<b><span class="Apple-style-span" style="color: lime;"><span class="Apple-style-span" style="color: black; font-weight: normal;"><b>
</b></span></a><br/>Copyright 2008 - 2009 All Rights Reserved: <a href='</span><span class="Apple-style-span" style="color: red;">http://sharingwithmee.blogspot.com/</span>'<span class="Apple-style-span" style="color: lime;">></span><div class="GFUPJP0PW" style="font-family: Arial, sans-serif; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 264px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<h3 style="-webkit-transition-delay: 0.2s; -webkit-transition-duration: 0.2s; -webkit-transition-property: all; -webkit-transition-timing-function: initial; font-family: 'Open Sans', arial, sans-serif; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 430px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap;">
<span class="Apple-style-span" style="color: red; font-size: small;">Sharing[̶̲̅ Blog Just4U</span></h3>
</div>
<span class="Apple-style-span" style="color: lime;"></a></span></b></div>
<div style="color: lime;">
<b><br/></b></div>
<div style="color: lime;">
<b></p></b></div>
<b style="color: black;"><span style="color: lime;"></div></span><span class="fullpost"> </span></b></blockquote>
<span class="fullpost"><b>[6].</b> Simpan Template Kalian dan Lihat Hasilnya...</span><br />
<span class="fullpost"><br />- Ganti Tulisan Yang Berwarna <b><span style="color: red;">Merah</span></b> Dengan Kata-Kata Kalian, Profile Facebook Kalian, Nama Blog Kalian, dan URL Blog Kalian.</span><br />
<br />
<span class="fullpost">Selamat Mencoba...!!!</span><br /><br />
<span class="Apple-style-span" style="font-size: x-small;"><br /></span>
<span class="Apple-style-span" style="font-size: xx-small;">Copyright@<a href="http://indonesianblog-jmk.blogspot.com/2011/11/membuat-footer-melayang-atau-strip.html#ixzz24u7zsRVj" target="_blank">Blog-Jmk</a></span></div>

Blogger CSS Javascript SeputarBerita Tips'N'Trik Cara Membuat Footer Melayang Atau Strip Footer

Salah satu Tips untuk memikat pengunjung bukan hanya pada artikel kalian tapi penampilan Blog Kalian merupakan pandangan pertama yang dapat memikat mereka. Jika Kalian merasa Blog Kalian belum tampil menarik maka Tips yang satu ini akan membuatnya l…

Cara Memasang Tombol Berbagi [Share] Di Bawah Postingan

8/30/2012 05:37:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="font-size: small; text-align: justify;">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijTEhCPK-HdXAii9RMIxdPWeYEGfA2GmP1aMGK8f60YtUl2LMOoYQR-rttRxRz-Ug-jO6Z_eyAkuLgfDklAKUq48vX8_2TFAKck-7Y1n7G5jFt6PqYwtwdxogy8lJ6Pf7w7Z7tdzUWdrXA/s1600/SS.PNG" imageanchor="1" style="color: black; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="59" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijTEhCPK-HdXAii9RMIxdPWeYEGfA2GmP1aMGK8f60YtUl2LMOoYQR-rttRxRz-Ug-jO6Z_eyAkuLgfDklAKUq48vX8_2TFAKck-7Y1n7G5jFt6PqYwtwdxogy8lJ6Pf7w7Z7tdzUWdrXA/s200/SS.PNG" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="200" /></a></div>
<br />
Tombol Berbagi atau yang sering di sebut juga Tombol Share, berfungsi untuk memudahkan pengunjung Blog kita untuk Berbagi Artikel yang di telah di baca. Like Facebook, Twitter Tweet, dan Google+1, merupakan layanan berbagi saat ini. OK, yang berbinat, silahkan ikuti langkah-langkah di bawah ini.<br />
<br />
<b>[1].</b> Pertama, pastinya Login dulu ke Blog Kalian.<br />
<b>[2].</b> Dari Dasbor, cari Rancangan --> Edit HTML.<br />
<b>[3].</b> Lalu centang kotak [<input id="expandWidgets" type="checkbox" /> <label for="expandWidgets">Expand Template Widget</label>].<br />
<b>[4].</b> Cari Code <b><span style="color: red;"><data:post.body/></span></b>. [Agar mempermudah pencarian, tekan <b>CTRL + F</b> atau <b>F3</b> pada Keyboard]. Jika menemukan Code <b><span style="color: red;"><data:post.body/></span></b> ada <b>2</b>, [<b>Pilih Yang NO. 2</b>].<br />
<b>[5].</b> Selanjutnya, Copy dan Paste-kan Code di bawah, tepat di <b>BAWAH</b> Code tadi.<br />
<div style="text-align: left;">
<blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(0, 0, 0); border-left-style: solid; border-left-width: 20px; border-right-color: rgb(0, 0, 0); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(0, 0, 0); border-top-style: solid; border-top-width: 2px; color: black; line-height: 1.6em; margin-bottom: 10px; margin-left: 20px; margin-right: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; padding-top: 10px;">
<b style="color: lime;"></b><br />
<b style="color: lime;"><div class="addthis_toolbox addthis_default_style "></b><br />
<b style="color: lime;"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a></b><br />
<b style="color: lime;"><a class="addthis_button_tweet"></a></b><br />
<b style="color: lime;"><a class="addthis_button_google_plusone" g:plusone:size="medium"></a></b><br />
<b style="color: lime;"><a class="addthis_counter addthis_pill_style"></a></b><br />
<b style="color: lime;"></div></b><br />
<b style="color: lime;"><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e8062ca66617053"></script></b><br />
<b style="color: lime;"></b></blockquote>
</div>
<b>[6].</b> Terakhir, tinggal di <b>SAVE</b> dan lihat hasilnya.<br />
<br />
<div style="text-align: center;">
<u><b>Semoga Bermanfaat...!!!</b></u></div>
</div>
</div>
<br />
<br />
<span class="Apple-style-span" style="font-size: xx-small;">Copyright@<a href="http://indonesianblog-jmk.blogspot.com/2012/03/cara-memasang-tombol-berbagi-share-di.html#ixzz24u5wFToQ" target="_blank">Blog-Jmk</a></span></div>

Blogger Javascript SeputarBerita Tips'N'Trik Cara Memasang Tombol Berbagi [Share] Di Bawah Postingan

Tombol Berbagi atau yang sering di sebut juga Tombol Share, berfungsi untuk memudahkan pengunjung Blog kita untuk Berbagi Artikel yang di telah di baca. Like Facebook, Twitter Tweet, dan Google+1, merupakan layanan berbagi saat ini. OK, yang berbina…

Memasang Widget Sharing is Sexy

8/30/2012 05:15:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-family: Ubuntu, verdana, arial, sans-serif; line-height: 20px;"></span><br />
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<a href="http://lh6.ggpht.com/_7Y9pl24WpQY/SzEFVgRWJlI/AAAAAAAACdQ/0fy3lDe78DE/s1600-h/sharingissexy%5B6%5D.png" style="color: #3569af; text-decoration: none;"><img alt="sharingissexy" border="0" height="63" src="http://lh5.ggpht.com/_7Y9pl24WpQY/SzEFXlxhv4I/AAAAAAAACdU/iah2aAFeMMw/sharingissexy_thumb%5B4%5D.png?imgmax=800" style="border-bottom-color: rgb(68, 68, 68); border-bottom-style: solid; border-bottom-width: 0px; border-color: initial; border-left-color: rgb(68, 68, 68); border-left-style: solid; border-left-width: 0px; border-right-color: rgb(68, 68, 68); border-right-style: solid; border-right-width: 0px; border-style: initial; border-top-color: rgb(68, 68, 68); border-top-style: solid; border-top-width: 0px; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="sharingissexy" width="524" /></a></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<br /></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Sebelumnya saya sudah pernah membahas <b><span class="Apple-style-span" style="color: red;">cara memasang widget share facebook</span></b> di bawah judul postingan. Kurang lebih sama fungsinya, namun kali ini saya akan memberikan sedikit tips buat sobat pemula yang ingin membagi artikelnya lewat situs-situs<span class="Apple-style-span" style="color: #cc0000;"><b> social bookmark</b></span> ataupun jejaring sosial, seperti <span class="Apple-style-span" style="color: #783f04;"><b>facebook, myspace, twitter</b></span>, dll.</div>
<span class="fullpost" style="display: inline;"></span><br />
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<span class="fullpost" style="display: inline;"><br /></span></div>
<span class="fullpost" style="display: inline;">
</span>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<span class="fullpost" style="display: inline;">Dengan memasang <a href="http://miscah.blogspot.com/2009/12/memasang-widget-sharing-is-sexy.html" style="color: #3569af; text-decoration: none;">widget sharing is sexy</a>, maka postingan atau artikel sobat akan cepat tersebar dan otomatis blog sobat akan cepat terkenal di situs-situs <b>social bookmark</b> yang notabennya memang tempat berkumpulnya para blogger di seluruh di dunia. Tapi dengan catatan isi konten menarik, dan sobat wajib mendaftar di berbagai situs social bookmark agar sobat bisa langsung sharing tanpa menunggu pengunjung blog yang mengklik <b>widget sharing is sexy</b>-nya.</span></div>
<span class="fullpost" style="display: inline;">
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<br /></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<br /></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Baiklah mari kita lanjutkan !</div>
<ul style="color: black; font-size: 13px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li style="list-style-type: disc; margin-bottom: 10px; margin-left: 40px; margin-right: 0px; margin-top: 0px;">Silahkan login ke <a href="http://blogger.com/" rel="nofollow" style="color: #3569af; text-decoration: none;" target="_blank">blogger</a>.</li>
<li style="list-style-type: disc; margin-bottom: 10px; margin-left: 40px; margin-right: 0px; margin-top: 0px;">Kemudian klik tab <b>Edit HTML</b>.</li>
<li style="list-style-type: disc; margin-bottom: 10px; margin-left: 40px; margin-right: 0px; margin-top: 0px;">Klik <b>Expand Template Widget</b>.</li>
<li style="list-style-type: disc; margin-bottom: 10px; margin-left: 40px; margin-right: 0px; margin-top: 0px;">Copy kode di bawah ini setelah kode <b>]]></b:skin></b> </li>
</ul>
<blockquote style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://lh4.ggpht.com/_7Y9pl24WpQY/S8Tb4-HIjdI/AAAAAAAADXU/XN-0YdNmIBI/image_thumb%5B26%5D.png); background-origin: initial; background-position: 5px 5px; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(230, 230, 230); border-bottom-style: outset; border-bottom-width: 2px; border-left-color: rgb(230, 230, 230); border-left-style: outset; border-left-width: 2px; border-right-color: rgb(230, 230, 230); border-right-style: outset; border-right-width: 2px; border-top-color: rgb(230, 230, 230); border-top-style: outset; border-top-width: 2px; color: #3b0b0b; font-size: 13px; margin-bottom: 15px; margin-left: 10px; margin-right: 10px; margin-top: 15px; padding-bottom: 10px; padding-left: 40px; padding-right: 10px; padding-top: 10px;">
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<style type='text/css'></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
div.sexy-bookmarks { height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat left bottom;position:relative; width:540px }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat right bottom; position:absolute; right:-17px }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarI2MridI/AAAAAAAAE4U/Qspdg7GUj5g/sexy_thumb%5B3%5D.png) no-repeat !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-furl { background-position:-300px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-furl:hover { background-position:-300px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-digg { background-position:-500px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-digg:hover { background-position:-500px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-reddit { background-position:-100px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-reddit:hover { background-position:-100px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-stumble { background-position:-50px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-stumble:hover { background-position:-50px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-delicious { background-position:left top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-delicious:hover { background-position:left bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-yahoo { background-position:-650px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-yahoo:hover { background-position:-650px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-blinklist { background-position:-600px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-blinklist:hover { background-position:-600px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-technorati { background-position:-700px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-technorati:hover { background-position:-700px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-myspace { background-position:-200px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-myspace:hover { background-position:-200px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-twitter { background-position:-350px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-twitter:hover { background-position:-350px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-facebook { background-position:-450px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-facebook:hover { background-position:-450px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-mixx { background-position:-250px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-mixx:hover { background-position:-250px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-script-style { background-position:-400px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-script-style:hover { background-position:-400px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-designfloat { background-position:-550px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-designfloat:hover { background-position:-550px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-syndicate { background-position:-150px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-syndicate:hover { background-position:-150px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-email { background-position:-753px top !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
.sexy-email:hover { background-position:-753px bottom !important }</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
</style></div>
</blockquote>
<br style="clear: both;" /><ul style="font-size: 13px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li style="color: black; list-style-type: disc; margin-bottom: 10px; margin-left: 40px; margin-right: 0px; margin-top: 0px;">Lalu cari kode <b><data:post.body/></b></li>
<li style="list-style-type: disc; margin-bottom: 10px; margin-left: 40px; margin-right: 0px; margin-top: 0px;">Jika sobat sudah menggunakan<span class="Apple-style-span" style="color: lime;"> <b>read more</b></span>, maka akan terdapat 2 kode <b style="color: black;"><data:post.body/></b>. Letakkan kode dibawah ini setelah kode <b style="color: black;"><data:post.body/></b> yang pertama</li>
</ul>
<blockquote style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://lh4.ggpht.com/_7Y9pl24WpQY/S8Tb4-HIjdI/AAAAAAAADXU/XN-0YdNmIBI/image_thumb%5B26%5D.png); background-origin: initial; background-position: 5px 5px; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(230, 230, 230); border-bottom-style: outset; border-bottom-width: 2px; border-left-color: rgb(230, 230, 230); border-left-style: outset; border-left-width: 2px; border-right-color: rgb(230, 230, 230); border-right-style: outset; border-right-width: 2px; border-top-color: rgb(230, 230, 230); border-top-style: outset; border-top-width: 2px; color: #3b0b0b; font-size: 13px; margin-bottom: 15px; margin-left: 10px; margin-right: 10px; margin-top: 15px; padding-bottom: 10px; padding-left: 40px; padding-right: 10px; padding-top: 10px;">
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<div class='sexy-bookmarks'></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<ul class='socials'></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/<b><span style="color: red;">miscah</span></b>' title='Subscribe to RSS'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
</ul></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<span class='sexy-rightside'/></div></div>
</blockquote>
<br style="clear: both;" /><div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Kemudian <b>Simpan Template</b>.</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<br /></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Ganti tulisan yang berwarna <b><span style="color: red;">merah</span></b> dengan <b>ID feedburner sobat</b>, jika belum punya sobat bisa daftarkan blog sobat langsung di <a href="http://feeds.feedburner.com/" rel="nofollow" style="color: #3569af; text-decoration: none;" target="_blank">feedburner</a>.</div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<br /></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<br /></div>
<div style="font-size: 13px; line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<br /></div>
<div style="line-height: 1.6em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<span class="Apple-style-span" style="font-size: xx-small;">copyright@<a href="http://miscah.blogspot.com/2009/12/memasang-widget-sharing-is-sexy.html" target="_blank">Miscah</a></span></div>
</span></div>

Blogger CSS Javascript SeputarBerita Tips'N'Trik Memasang Widget Sharing is Sexy

Sebelumnya saya sudah pernah membahas cara memasang widget share facebook di bawah judul postingan. Kurang lebih sama fungsinya, namun kali ini saya akan memberikan sedikit tips buat sobat pemula yang ingin membagi artikelnya lewat situs-situs socia…