Sharing Mie

Mengenal Struktur Dasar Template BlogGer

2/09/2013 05:19:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Sebelum kita akan mengedit suatu <b>HTML</b> <b>blog </b>atau merancang sebuah pengkodean<b> template web/blog,</b> ada bagusnya apabila kita mengenal terlebih dahulu dalam struktur atau bagian-bagian dasar template. dan perlu sobat ketahui bahwa setiap struktur <b>HTML template</b> yang ada pada blog tidak semuanya sama. dengan kita mengenal dasar dari struktur template diharapkan sobat dapat lebih faham, setidaknya sobat tahu dasar struktur dari template blog. dan berikut penjelasan SharingWithmee hasil search google.<br />
<br />
Bagian dari struktur template blog pada umumnya terdiri dari <b>Header, Post, Sidebar dan Footer. </b><br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHj6aT2ZfGWJAYNeg7-ZLGH8PmxCVYc1VL0K-x5GkYF9dizIz6PqmSFhgSOua9da-BuwnHBSAoO82QxF69M0E69WzNQRP7K5xBXtwmeF4_YfvYRzmYKciLOcQDRCUrfysrONelXJP3bj0/s1600/mengenal+struktur+dasar+template+body.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHj6aT2ZfGWJAYNeg7-ZLGH8PmxCVYc1VL0K-x5GkYF9dizIz6PqmSFhgSOua9da-BuwnHBSAoO82QxF69M0E69WzNQRP7K5xBXtwmeF4_YfvYRzmYKciLOcQDRCUrfysrONelXJP3bj0/s1600/mengenal+struktur+dasar+template+body.jpg" /></a></div>
<div>
<div>
Kesimpulan dan penjelasan (untuk mempermudah dalam penjelasan dapat sobat lihat gambar yang ada diatas) :</div>
<div>
<br /></div>
<blockquote class="tr_bq">
Body :<br />Body tersebut yakni blok untuk menampung yang ada pada seluruh layar komputer, karena body ini yang menampung seluruh konten dari blog atau website.</blockquote>
<div>
<br /></div>
<blockquote class="tr_bq">
Outer-wrapper :<br />Outer wrapper ini adalah bagian blok dari batas luar template atau yang melingkupi template. dapat sobat lihat Outer wrapper pada gambat diatas yang berwarna pink/merah jambu, jadi kebanyakan pada umumnya outer wrapper ini sebagai wadah header, sidebar, main-wrapper dan juga footer.</blockquote>
<div>
<br /></div>
<blockquote class="tr_bq">
Header :<br />Nah yang ini pasti sobat udah pada tahu kan, karena kebanyakan para blogger sangat gemar mengedit sebuah Headernya agar terlihat lebih cantik. Betul sekali sob, Header ini blok yang berada dibagian paling atas dan Biasanya header ditempati oleh judul, deskripsi, logo dan lain-lain.</blockquote>
<div>
<br /></div>
<blockquote class="tr_bq">
Sidebar :<br />Blok sidebar adalah kotak yang berada di kanan dan kiri atau berada di salah satunya main-wrapper/post. dan biasanya Block ini digunakan sebagai wadah widget/gadget blog atau aksesoris misalnya About me, Link list, gambar slide, Javascript etc.</blockquote>
<div>
<br /></div>
<blockquote class="tr_bq">
Main :<br />Didalam Main-wrapper terdapat blok Post, blok Comment, Date Header, dan bagian lain yang dapat dibuat dari opsi Add Page Element.</blockquote>
<div>
<br /></div>
<blockquote class="tr_bq">
Post :<br />dalam blok ini menampung seperti Judul Post, Post konten, kotak komentar dan juga keterangan lainnya mengenai artikel atau posting blog.</blockquote>
<div>
<br /></div>
<blockquote class="tr_bq">
Footer :<br />Blok ini adalah bagian bawah dari template. Seperti di Header, dibutuhkan juga Footer-wrapper yang berisi bagian-bagian dari footer. biasanya footer ini ditempati sebuah tautan dan juga teks keterangan hak cipta</blockquote>
<div>
<br /></div>
<div>
Untuk mempelajari Tag HTML bagian body silahkan buka link [<a href="http://gaptek32.blogspot.com/2012/09/mengenal-struktur-dasar-kode-body.html" target="_blank"><b>ini</b></a>] untuk pembelajaran lebih lanjut mengenai <b>Struktur dasar kode body.</b></div>
</div>
<div>
<br /></div>
<div>
<b><span style="font-size: xx-small;"><i>Copyright@Gaptek32</i></span></b></div>
</div>

Blogger Mengenal Struktur Dasar Template BlogGer

Sebelum kita akan mengedit suatu HTML blog atau merancang sebuah pengkodean template web/blog, ada bagusnya apabila kita mengenal terlebih dahulu dalam struktur atau bagian-bagian dasar template. dan perlu sobat ketahui bahwa setiap struktur HTML te…

Membuat Tabview Dengan Widget Tanpa Menggunakan CSS

2/06/2013 09:14:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2KZ9Zr7a2dkptVHUE2vk-QVmWDTdJqFij3irzgl8BKMc8M2-cgwfngf0OfvSsgH364qcbpNgzHCon7uBxEGvra6I1wH-EWSfeJtkPyXuCpRk0st8hcNfJv2_oTZOAddzF6fk2TgxgeQ/s320/tabview.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2KZ9Zr7a2dkptVHUE2vk-QVmWDTdJqFij3irzgl8BKMc8M2-cgwfngf0OfvSsgH364qcbpNgzHCon7uBxEGvra6I1wH-EWSfeJtkPyXuCpRk0st8hcNfJv2_oTZOAddzF6fk2TgxgeQ/s320/tabview.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screeshot By Sharing Blog Just 4 U</td></tr>
</tbody></table>
<b>Sharing Blog Just 4 U</b>  mengidamkan sebuah template yang minimalis, ringkas, dan tetap menarik?<br />
Mungkin dengan adanya penambahan tabview pada template<b> Sharing Blog Just 4 U </b> bisa mewujudkan template idaman Saudara/i Sobat .<br />
Tabview bisa menghemat dan meringkas ruang template, jadi pengunjung blog Sobat tidak pusing ngeliatin blog Anda Sobat. Trus gimana bikinnya?<br />
<br />
Pertama Kita Harus <span style="color: blue;"><b>Log In </b></span>Dolo Ke <span style="color: #674ea7;"><b>BLOGGER</b></span> kita<br />
<br />
<br />
<br />
<br />
<br />1. Tambahkan widget <span style="color: #b45f06;"><b>HTML/Javascript</b></span> dan letakkan dimana tempat tebwiew yang jagoan kehendaki<br />
<br />2. Copi dan pastekan kode dibawah ini pada <span style="color: orange;"><b>widget HTML</b></span> yang udah Sobat" buat sebelumnya.<br /><br />
<br />
<blockquote class="tr_bq">
    <style type="text/css"><br />    div.TabView div.Tabs<br />    {height: 30px;overflow: hidden}<br />    div.TabView div.Tabs<br />    {background-color: #ffffff; /* <span style="color: red;"><b>Warna background Menu Utama Atas</b></span> */ }<br />    div.TabView div.Tabs a {float:left; display:block; width: 86.5px; /* <span style="color: red;"><b>Lebar Menu Utama Atas</b></span> */<br />    text-align:center ; height: 30px; /*<b><span style="color: red;"> Tinggi Menu Utama Atas </span></b>*/<br />    padding-top:0px; vertical-align:middle; border:3px solid #000000; /* <span style="color: red;"><b>Warna border Menu Atas</b></span> */<br />    border-bottom-width:0; text-decoration: none; font-family: "Courier", Serif; /*<span style="color: red;"><b> Jenis Font Menu Utama Atas</b></span> */<br />    font-weight:bold; color:#000; /*<b><span style="color: red;"> Warna Font Menu Utama Atas</span></b> */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px}<br />    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #B22222; /* <b><span style="color: red;">Warna background Menu Utama Atas</span></b> */ }<br />    div.TabView div.Pages {clear:both; border:3px solid #000000; /* <span style="color: red;"><b>Warna border Kotak Utama </b></span>*/ overflow:hidden; background-color:#000000; /* <b><span style="color: red;">Warna background Kotak Utama</span></b> */ }<br />    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}<br />    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}<br />    </style><br />    <script type='text/javascript'><br />    //<![CDATA[<br />    function tabview_aux(TabViewId, id)<br />    {<br />    var TabView = document.getElementById(TabViewId);<br />    // ----- Tabs -----<br />    var Tabs = TabView.firstChild;<br />    while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;<br />    var Tab = Tabs.firstChild;<br />    var i = 0;<br />    do<br />    {<br />    if (Tab.tagName == "A")<br />    {<br />    i++;<br />    Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";<br />    Tab.className = (i == id) ? "Active" : "";<br />    Tab.blur();<br />    }<br />    }<br />    while (Tab = Tab.nextSibling);<br />    // ----- Pages -----<br />    var Pages = TabView.firstChild;<br />    while (Pages.className != 'Pages') Pages = Pages.nextSibling;<br />    var Page = Pages.firstChild;<br />    var i = 0;<br />    do<br />    {<br />    if (Page.className == 'Page')<br />    {<br />    i++;<br />    if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";<br />    Page.style.overflow = "auto";<br />    Page.style.display = (i == id) ? 'block' : 'none';<br />    }<br />    }<br />    while (Page = Page.nextSibling);<br />    }<br />    // ----- Functions -------------------------------------------------------------<br />    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }<br />    function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }<br />    //]]><br />    </script><br />    <form action="tabview.html" method="get"><br />    <div id="TabView" class="TabView"><br />    <div style="width: 280px;" class="Tabs"><br />    <a><b><span style="color: red;">Nama tabview 1</span></b></a><br />    <a><b><span style="color: red;">Nama tabvier 2</span></b></a><br />    <a><b><span style="color: red;">Nama tabview 3</span></b></a><br />    </div><br />    <div style="width:273px; height:400px; " class="Pages"><br />    <div class="Page"><br />    <div class="Pad"><br /><br />    <b><span style="color: lime;">Masukkan kode widget untuk tabview 1 di sini</span></b><br /><br />    </div><br />    </div><br />    <div class="Page"><br />    <div class="Pad"><br /><br />   <b><span style="color: lime;"> Masukkan kode widget untuk tabview 2 di sini</span></b><br /><br />    </div><br />    </div><br />    <div class="Page"><br />    <div class="Pad"><br /><br />    <span style="color: lime;"><b>Masukkan kode widget untuk tabview 3 di sini</b></span><br /><br />    </div><br />    </div><br />    </form><br />    <script type="text/javascript"><br />    tabview_initialize('TabView');<br />    </script>  </blockquote>
<br />3. Modifikasi kode yang diberi keterangan berwarna <b><span style="color: red;">Merah</span> dan <span style="color: lime;">Hijau</span></b> sesuai dengan template dan selera Sobat Telah Selesai Di Setting Deh., Berikutnya<br />
<br />4. Simpan dan semoga berhasil. Life for sharing From Just 4 U...<br /><br /></div>

Screeshot By Sharing Blog Just 4 U Sharing Blog Just 4 U mengidamkan sebuah template yang minimalis, ringkas, dan tetap menarik? Mungkin dengan adanya penambahan tabview pada template Sharing Blog Just 4 U bisa mewujudkan template idaman Saudara/i…

Cara menambah kotak berlangganan dan share widget ke Blogger

2/04/2013 01:59:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIX9tgSOB3tGC5z96mEnTHkm02ATiHKX2xzmbugL2heiXMGv88tCQFcnO5QAoQ7kQLj3qhdeXRc0wWZa5WWhx4hL-68A06eP7x9wE6rjIsvFjjgxQfUq3EEIVDbHe6sN8z1s-PVDk2Ylv/s1600/iconsetc-blogger-logo-square.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIX9tgSOB3tGC5z96mEnTHkm02ATiHKX2xzmbugL2heiXMGv88tCQFcnO5QAoQ7kQLj3qhdeXRc0wWZa5WWhx4hL-68A06eP7x9wE6rjIsvFjjgxQfUq3EEIVDbHe6sN8z1s-PVDk2Ylv/s1600/iconsetc-blogger-logo-square.png" width="320" /></a></div>
<br />
Dalam tutorial, saya akan menjelaskan kepada Anda bagaimana membuat Kotak Berlangganan dengan Feedburner Email, berlangganan Delicius dan tombol jaringan sosial lainnya (<b>Digg, Twitter, Facebook, Stumbleupon, Delicious</b>). Anda dapat dengan mudah menambah atau menghapus tombol sosial untuk widget ini dan setup email subscription.If Anda Anda ingin menambahkan widget ini ke blog atau website, maka ikuti langkah-langkah di bawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<ol style="text-align: left;">
<li>Log in ke Layout</li>
<li>Klik pada 'Tambah Gadget' di sidebar.</li>
<li>Pilih 'HTML / Javascript "dan tambahkan kode yang diberikan di bawah ini dan klik simpan.</li>
</ol>
<br />
<blockquote class="tr_bq">
style type="text/css">#subscribe-box {      overflow: hidden;      margin: 10px 0 0 0;      }<br />
#subscribe-box a.subscribe-sec {      display: inline-block;      display: -moz-inline-stack;      width: 40px;      padding-top: 38px;      zoom: 1;      }<br />
#subscribe-box a.subscribe-sec:hover {      color: #660000;      }</style><br />
<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value=&#39;&#39;;" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p><br />
<p><div id="subscribe-box"><a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1JVdqUVEqOqz4xWf0p2c-2hd6EcXf6wRD9HmWKCwnadA8V0y_iX2Ul18lCqPedSBW5hXQprao5Srf2aElKp_unhyphenhyphenivyO5JJEq3oXQyFiYrKgj3N596EU4ejlTou6a9aKGg9jgjiDRlR5/s1600/delicious.png) center top no-repeat"></a><a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQ4pMG9HgTlOf9k03AXJZ4aQ7gzGB-92P2hOOkbzKtRtFwz2Pv4_mexP_mUoAym-zA-s8dZyl4tGbTtOJldSD5A_UUkPTa0-cOmFpxpPuLpAkAGmpqYjwc8oRGlzLGiUwRJDcBmfPDtPB/s1600/twitter.png) center top no-repeat"></a><a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-XsJvuxgF8U8gVTDJVeTw19jc_XY7G40B6H433t8Bz-YfgaeCdpGQkGmvLABfJHdWlPLcRpGfWrhqDEJoizU9wWr5ZbWZYu0HZr72JMyUxqafOmh29LNfFKWW1CQoVpiDOMLYsvAYNscT/s1600/digg.png) center top no-repeat"></a><a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ1NKo1xe6pcwg3d-DjOVNsDRKeZkPDvAOKpZZ92lavo_YZ6Tb9YtZ7M4K1sqbzUN_WqiZipNjkDSDnWRN6t-i_3VKDCaut407J7fszH7evfvpSNlCN0KRhmpEnCIFKpTVVsoYTl9b1cW8/s1600/facebook.png) center top no-repeat"></a><a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyW-J9-8lW12Czto6gm-FgRV3EjteZWdtsP23PawAdtHsF4x5EvsFd2QViKj-XNZiflE3rKQRZQW9-gsni0LHA28TSItdX6Sren5xpPgY-e6cHbdVpymrqaLg5vJFrKa4Js6UmQY5nCdjS/s1600/stumbleupon.png) center top no-repeat"></a><a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYvRMvu8n-xm5Mxyt6j_wC7J4SKeEF0Qtjidas6ae6v1dPN7mrkWrvv7fbbCRo2amya61m9DyYhstuEpL3MDZ-vPnEzMIniev9DQxfQVVYaYJhyLKa1f3oUB5vV3d_Kiwsq8fnF_yxe1Iv/s1600/rss.png) center top no-repeat"></a></div></p><br />
</form></blockquote>
<div class="separator" style="clear: both;">
<b>Keterangan :</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Ganti ID pada script yang diwarnai.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Tips :</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Jika Anda tidak punya akun Delicious,  Stumbleupon, dan Digg, Anda tinggal menghapus saja script nya seperti pada contoh dibawah ini :</div>
<blockquote class="tr_bq">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1JVdqUVEqOqz4xWf0p2c-2hd6EcXf6wRD9HmWKCwnadA8V0y_iX2Ul18lCqPedSBW5hXQprao5Srf2aElKp_unhyphenhyphenivyO5JJEq3oXQyFiYrKgj3N596EU4ejlTou6a9aKGg9jgjiDRlR5/s1600/delicious.png) center top no-repeat"></a></blockquote>
<div>
TQ</div>
<br />
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Cara menambah kotak berlangganan dan share widget ke Blogger

Dalam tutorial, saya akan menjelaskan kepada Anda bagaimana membuat Kotak Berlangganan dengan Feedburner Email, berlangganan Delicius dan tombol jaringan sosial lainnya (Digg, Twitter, Facebook, Stumbleupon, Delicious). Anda dapat dengan mudah menam…

Edit Artikel/postingan Populer dengan Slider Carousel

2/04/2013 01:56:00 PM Palma Hutabarat 2

<div dir="ltr" style="text-align: left;" trbidi="on">
Script ini sangat mudah untuk menginstal, Anda hanya harus meletakkan script untuk Gadget baru<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jIM0FpGlbEXazCklqDR8TeE1Xg25VXHSWDdmModQV5iJcqj3VbLc53_1OBw70yilSRpb3WuvbvKkFR2m3konEi_JD5i6QIU9nP2xvwIcmMa-_kHlGBVTF3TifCnRRg7X436mQMra_EaJ/s1600/petunjuk1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jIM0FpGlbEXazCklqDR8TeE1Xg25VXHSWDdmModQV5iJcqj3VbLc53_1OBw70yilSRpb3WuvbvKkFR2m3konEi_JD5i6QIU9nP2xvwIcmMa-_kHlGBVTF3TifCnRRg7X436mQMra_EaJ/s320/petunjuk1.jpg" width="320" /></a></div>
<br />
<ul style="text-align: left;">
<li>Login ke Dashboard Blogger dan arahkan ke <b>Desain - Elemen Halaman</b></li>
<li>Klik "Tambah Gadget" dan Pilih "Popular Posts" ( <b>Jika Anda sudah memiliki gadget ini melewatkan langkah ini</b> )</li>
<li>Setelah Anda memiliki gadget Popular Post "Tambah Gadget" lagi dan pilih "HTML / Javascript"</li>
<li>Masukkan semua di bawah script untuk "Konten" HTML / Javascript Gadget</li>
<li>Jika Anda telah jQuery di Template Anda hapus dari naskah saya</li>
<li>Selesai-posting Anda populer sekarang dengan animasi</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<blockquote>
<style><br />
#slider ol,#slider ul,#slider li<br />
 {<br />
 margin: 0;<br />
 padding: 0;<br />
 border: 0;<br />
 outline: 0;<br />
 font-size: 100%;<br />
}<br />
.popular-posts  img {<br />
  margin: 0  !important;<br />
  padding:0  !important;<br />
  width:150px;<br />
  height:120px;<br />
}<br />
ol, ul {<br />
 list-style: none;<br />
 }<br />
.wrapper {<br />
 width: 720px;<br />
 margin: 0 auto;<br />
 position:relative;<br />
}<br />
.clear {<br />
 clear: both;<br />
 }<br />
.display-none {<br />
 display:none;<br />
 }<br />
#slider {<br />
 position: relative;<br />
 top: -2px;<br />
 z-index: 1;<br />
 }<br />
#slider .prev {<br />
 position: absolute;<br />
 width: 21px;<br />
 height: 21px;<br />
 display: block;<br />
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;<br />
 top: 150px;<br />
 left: -51px;<br />
 }<br />
#slider .next {<br />
 position: absolute;<br />
 width: 21px;<br />
 height: 21px;<br />
 display: block;<br />
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;<br />
 top: 150px;<br />
 right: -51px;<br />
 }<br />
#slider #slider-wrapper {<br />
 width: 720px;<br />
 height: 300px;<br />
 padding-top: 40px;<br />
 overflow: hidden;<br />
 z-index: 999;<br />
 position: relative;<br />
 }<br />
#slider #slider-inner {<br />
 width:9780px;<br />
 height:300px;<br />
 position:absolute;<br />
 }<br />
#slider .article {<br />
 width: 150px;<br />
 height: 300px;<br />
 float: left;<br />
 margin-right: 30px;<br />
 }<br />
#slider .article img {<br />
 margin-bottom: 25px;<br />
 box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);<br />
 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);<br />
 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);<br />
 }<br />
#slider .article h2 {<br />
 margin-bottom: 15px;<br />
 line-height: 18px;<br />
 }<br />
#slider .article h2 a {<br />
 font-size: 18px;<br />
 color: #404040;<br />
 font-weight: bold;<br />
 text-shadow: 0 1px 0 #fff;<br />
 line-height: 23px;<br />
 }<br />
#slider .article .meta-comments a {<br />
 font-size: 10px;<br />
 font-weight: bold;<br />
 text-transform: uppercase;<br />
 text-shadow: 0 1px 0 #fff;<br />
 }<br />
#slider .article .item-snippet {<br />
 margin-left: 15px;<br />
 }<br />
#slider .widget-item-control { display: none}<br />
</style><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script></blockquote>
Terima kasih. Telah Berkunjung </div>
<br /></div>

Blogger CSS HTML Javascript jQuery Edit Artikel/postingan Populer dengan Slider Carousel

Script ini sangat mudah untuk menginstal, Anda hanya harus meletakkan script untuk Gadget baru Login ke Dashboard Blogger dan arahkan ke Desain - Elemen Halaman Klik "Tambah Gadget" dan Pilih "Popular Posts" ( Jika Anda sudah memiliki gadget ini mel…

Social Media Dengan Kotak Berlangganan Keren Untuk Blogger

2/04/2013 01:52:00 PM Palma Hutabarat 0

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-RnnLGnhNLGHhseu5GGec2sh_toCt6qM3ywnuBuUpzc3kd8Q6P3lRm0dc6b9QIsjLanAP9YjRNGhPkKEK5hH_lrNJIdjkPFLcpWRf_uDls4xc8zG0GhrE3VB3F-8KkNUSZReruQzEkI88/s1600/cara+menampilkan+kotak+komentar+google+.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-RnnLGnhNLGHhseu5GGec2sh_toCt6qM3ywnuBuUpzc3kd8Q6P3lRm0dc6b9QIsjLanAP9YjRNGhPkKEK5hH_lrNJIdjkPFLcpWRf_uDls4xc8zG0GhrE3VB3F-8KkNUSZReruQzEkI88/s1600/cara+menampilkan+kotak+komentar+google+.png" width="320" /></a></div>
<div dir="ltr" trbidi="on">
<br />
Hai sobat blogger, lama saya tidak mengepost widget untuk blogger lagi. Widget ini cukup keren dan elegan untuk Anda pasang ke blog Anda. Lanjutan Widget Sosial memberi Anda terlihat seperti widget profesional untuk kotak berlangganan widget yang memberikan pengguna untuk menghubungkan website Anda untuk populer situs media sosial seperti Delicious, Twitter, Facebook, StumbleUpon, Pinterest, LinkedIn dan juga Anda dapat mengakses ke FeedBurner Berlangganan Email.<br />
<br />
Sangat mudah untuk menentukan jaringan sosial Anda ingin menampilkan dan apa Ikon untuk menunjukkan. Pembaca dengan mudah dapat Anda Ikuti di Twitter, mendaftar untuk FeedBurner RSS Feed. Plugin ini dirancang untuk Anda dengan persyaratan kualitas terbaik dan juga diuji di semua web browser utama modern.<br />
<br />
Langsung saja :<br />
<br />
<ul style="text-align: left;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke Menu Layout > Add Gadget > HTML/Javascript</li>
<li>Pastekan kode dibawah ini :</li>
</ul>
<br />
<blockquote class="tr_bq">
<style><br />
div#advancedsocialwidget,div#advancedsocialwidget ul,div#advancedsocialwidget ul li,div#advancedsocialwidget ul li img,div#advancedsocialwidget ul li span,#advancedsocialwidget ul li a{background:none;border:none;margin:0;padding:0}<br />
div#advancedsocialwidget{font-family:inherit;background:#fefefe url() repeat-x;width:100%;border:1px solid #ddd!important;font-size:90%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:0 0 10px!important;padding:5px 2px 18px!important}<br />
div#advancedsocialwidget h3{font-size:inherit;text-shadow:0 1px 0 rgba(255,255,255,.5);margin:0!important;padding:2px 0 5px 10px !important}<br />
#newsletter{text-align:center;margin:0 auto 10px!important;padding:0!important}<br />
.newsletter input{-moz-border-radius-topleft:3px!important;-moz-border-radius-topright:0!important;-webkit-border-top-left-radius:3px!important;-webkit-border-top-right-radius:0!important;-moz-border-radius-bottomleft:3px!important;-moz-border-radius-bottomright:0!important;-webkit-border-bottom-left-radius:3px!important;-webkit-border-bottom-right-radius:0!important;-webkit-font-smoothing:antialiased;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;background:0 color-stop(.25,#FFF));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',EndColorStr='#FFFFFF');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE', EndColorStr='#FFFFFF')";border:1px solid #CCC;color:#666!important;height:18px!important;font-size:11px!important;line-height:18px!important;vertical-align:top;margin:5px 0 0!important;padding:4px!important}<br />
.newsletter input:focus,.newsletter input:active{background:#fafafa}<br />
.newsletter button{vertical-align:top;height:28px!important;line-height:18px!important;text-align:left;width:auto;-moz-border-radius-topright:3px!important;-moz-border-radius-topleft:0!important;-webkit-border-top-right-radius:3px!important;-webkit-border-top-left-radius:0!important;-moz-border-radius-bottomright:3px!important;-moz-border-radius-bottomleft:0!important;-webkit-border-bottom-right-radius:3px!important;-webkit-border-bottom-left-radius:0!important;background:#4b88a0;background-image:0;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;font:bold 11px Arial, Helvetica!important;color:#fff;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.2);border-color:#75a1b2 #4b88a0 #38677a;border-style:solid;border-width:1px;margin:5px 0 0!important;padding:4px!important}<br />
.newsletter button:hover{background:#75a1b2;background-image:0;cursor:pointer}<br />
.newsletter button:active{background:#89C9E2;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}<br />
div#advancedsocialwidget .textwidget img{border:0}<br />
div#advancedsocialwidget .textwidget .tfsubscribelink{text-align:center!important;position:relative;margin:5px auto!important}<br />
div#advancedsocialwidget .textwidget .rssicon{width:21px;height:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -176px 0;margin-bottom:30px;padding:5px 20px 7px 0}<br />
div#advancedsocialwidget .textwidget .rssicon a,div#advancedsocialwidget .textwidget .rssicon a:hover{text-decoration:none}<br />
div#advancedsocialwidget .textwidget .socialfollow{text-align:center;width:245px;margin:10px auto}<br />
div#advancedsocialwidget .textwidget .rsssubscribelink{display:block;text-align:center;margin:0 auto 5px;padding:0}<br />
div#advancedsocialwidget .textwidget a.rsslink{text-decoration:none;font-weight:700!important;font-family:inherit}<br />
div#advancedsocialwidget .textwidget a.rsslink:hover{text-decoration:underline}<br />
div#social_icons{float:left;width:100%;background:#fff;position:relative}<br />
div#social_icons ul{clear:left;float:left;list-style:none;position:relative;left:50%;text-align:center;margin:0!important;padding:0!important}<br />
div#social_icons ul li{display:block;float:left;list-style:none;position:relative;right:50%;margin:0 0 0 1px !important;padding:3px 10px!important}<br />
div#social_icons ul li span{display:block;color:#444!important;font-size:8px;border:none;padding:40px 0 2px!important}<br />
div#social_icons ul li:first-child span{margin-left:-2px}<br />
div#social_icons ul li:last-child span{margin-left:-10px}<br />
div#social_icons .subscribe_delicious a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -76px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_twitter a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat 0 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_stumbleupon a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -101px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_google a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -50px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_facebook a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -25px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_pinterest a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -126px 0;font-family:inherit;color:inherit}<br />
div#social_icons .subscribe_linkedin a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqhJQEJW6LcrU9D0VYdcK352_IfbKMEX0PaWwnPRVJKJp6_FujuiWdSBy5bgoJHlOnVekkXDG-9MnnIFwD-kZ3qVLayR5VFjq8F4sLjSjndIXtzYQ9bfMAHwdBRRUHSjfchCu-otCao7x/s1600/advsoc_widget_main_24.png) no-repeat -151px 0;font-family:inherit;color:inherit}<br />
.tipsy{font-size:10px;opacity:0.8;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);padding:5px}<br />
.tipsy-inner{background-color:#000;color:#FFF;max-width:200px;text-align:center;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px}<br />
.tipsy-north{background-position:top center}<br />
.tipsy-south{background-position:bottom center}<br />
.tipsy-east{background-position:right center}<br />
.tipsy-west{background-position:left center}<br />
.clear{clear:both}<br />
</style><br />
<div id="advancedsocialwidget" style="width:270px !important"><br />
<h3>Subscribe for latest updates</h3><br />
<div class="textwidget"><br />
<div id="newsletter"><br />
<form action="http://feedburner.google.com/fb/a/mailverify" class="newsletter" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wpinsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br />
<input type="hidden" name="uri" value="<span style="color: #38761d;"><b>YOUR-FEEDBURNER-ID</b></span>" /><br />
<input type="hidden" name="loc" value="en_US" /><br />
<input name="email" id="newsletter-text" type="text" maxlength="100" style="width:160px !important" value="" class="" /><button type="submit" id="newsletter-button">Subscribe</button><br />
</form><br />
</div><br />
<div class="rsssubscribelink"><br />
<a title="Subscribe to RSS Feed" href="http://feeds.feedburner.com/wpinsite" class="rssicon"></a> &nbsp;<a class="rsslink" href="http://feeds.feedburner.com/<b><span style="color: #38761d;">YOUR-FEEDBURNER-ID</span></b>">Subscribe to RSS Feed</a><br />
</div><br />
<div class="socialfollow"><br />
<div id="___plusone_0" style="height: 20px; width: 90px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><iframe allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 20px; width: 90px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="0" vspace="0" width="100%" id="I0_1341141889671" name="I0_1341141889671" src="https://plusone.google.com/_/+1/fastbutton?bsv=pr&amp;url=http%3A%2F%2F<b><span style="color: #38761d;">www.YOUR-WEBSITE-URL.com</span></b>%2F&amp;size=medium&amp;count=true&amp;origin=http%3A%2F%2Fwww.wpinsite.com&amp;hl=en-US&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3DVZZqGbh13DI.en_GB.%2Fsv%3D1%2Fam%3D!0Tt3uNrLr0Coc6egjA%2Fd%3D1%2Frs%3DAItRSTNEDiY6r3yiw7M_70-BLTWIV1YUXw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart&amp;id=I0_1341141889671&amp;parent=http%3A%2F%2Fwww.wpinsite.com" title="+1"></iframe></div> <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/<b><span style="color: #38761d;">YOUR-FACEBOOK-ID</span></b>&amp;layout=button_count&amp;show_faces=false&amp;width=40&amp;action=like&amp;font=&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowtransparency="true"></iframe> <div class="tfsubscribelink"><br />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1340179658.html#_=1341141886240&amp;id=twitter-widget-12&amp;lang=en&amp;screen_name=<b><span style="color: #38761d;">YOUR-TWITTER-ID</span></b>&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 95%; height: 20px; " title="Twitter Follow Button"></iframe><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><br />
</div><br />
</div><br />
<div class="clear" style="margin-bottom:5px;"></div><br />
<div id="social_icons"><br />
<ul><br />
<li class="subscribe_delicious" style="padding:0 4px !important"><a id="subscribe_delicious" href="http://delicious.com/post?url=http%3A%2F%2<b><span style="color: #38761d;">Fwww.YOUR-WEBSITE-URL.com</span></b>&amp;title=WPInsite" class="fade" target="_blank" style="opacity: 1; " original-title="Bookmark WPInsite on Delicious"></a></li><br />
<li class="subscribe_twitter" style="padding:0 4px !important"><a id="subscribe_twitter" href="http://twitter.com/<span style="color: #38761d;"><b>YOUR-TWITTER-ID</b></span>" class="fade" target="_blank" style="opacity: 1; " original-title="Follow wpinsite on Twitter"></a></li><br />
<li class="subscribe_facebook" style="padding:0 4px !important"><a id="subscribe_facebook" href="http://www.facebook.com/<span style="color: #38761d;"><b>YOUR-FACEBOOK-ID</b></span>" class="fade" target="_blank" style="opacity: 1; " original-title="Visit the WPInsite Facebook Page"></a></li><br />
<li class="subscribe_google" style="padding:0 4px !important"><a id="subscribe_google" href="https://plus.google.com/u/1/<span style="color: #38761d;"><b>YOUR-GOOGLE-PLUS-ID</b></span>" class="fade" target="_blank" style="opacity: 1; " original-title="Visit the WPInsite Google+ Page"></a></li><br />
<li class="subscribe_stumbleupon" style="padding:0 4px !important"><a id="subscribe_stumbleupon" href="http://www.stumbleupon.com/submit?title=WPInsite&amp;url=http%3A%2F%2F<b><span style="color: #38761d;">www.YOUR-WEBSITE-URL.com</span></b>" class="fade" target="_blank" style="opacity: 1; " original-title="Recommend WPInsite on StumbleUpon"></a></li><br />
<li class="subscribe_pinterest" style="padding:0 4px !important"><a id="subscribe_pinterest" href="http://www.pinterest.com/<span style="color: #38761d;"><b>YOUR-PINTEREST-ID</b></span>" class="fade" target="_blank" style="opacity: 1; " original-title="Follow me on Pinterest"></a></li><br />
<li class="subscribe_linkedin" style="padding:0 4px !important"><a id="subscribe_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2F<b><span style="color: #38761d;">www.YOUR-WEBSITE-URL.com</span></b>" class="fade" target="_blank" style="opacity: 1; " original-title="Submit post to LinkedIn"></a></li><br />
</ul><br />
</div><br />
</div><br />
<div class="clear"></div><br />
<div class="clear" style="margin-bottom:10px;"></div><br />
<div style="margin:auto; text-align:center; margin-bottom:0 !important; padding-bottom:0 !important"></div><br />
</div></blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-BmCFVypjjoQ/UJzOwuMyYEI/AAAAAAAAB8Y/TSumqBWaMI0/s1600/How+to+Add+Thesis+Email+Subscription+Widget+To+Your+Blogger+Blog+v3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-BmCFVypjjoQ/UJzOwuMyYEI/AAAAAAAAB8Y/TSumqBWaMI0/s1600/How+to+Add+Thesis+Email+Subscription+Widget+To+Your+Blogger+Blog+v3.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<blockquote class="tr_bq">
<div id="sidebars"><br />
<ul class="sidebar_list"><br />
<li id="social-profiles"><br />
<ul><br />
<li><br />
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook Fan Page" href="https://www.facebook.com/<span style="color: red;"><b>ID Anda Disini"</b></span>>Facebook</a><br />
</li><br />
<li><br />
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/<span style="color: red;"><b>ID Anda Disini</b></span>">Twitter</a><br />
</li><br />
<li><br />
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/<b><span style="color: red;">ID Google+ Anda</span></b>">GooglePlus</a><br />
</li><br />
<li><br />
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/<span style="color: red;"><b>ID Anda Disini</b></span>">Rss</a><br />
</li><br />
<li><br />
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/palmahutabarat">Youtube</a><br />
</li><br />
</ul><br />
</li><br />
<li id="sidebar-social"><br />
<p id="email-notice"><br />
Receive Quality Tutorials Straight In Your Inbox by Submitting Your Email ID Below.We Respect Your Privacy.<br />
<span></span><br />
</p><br />
<div id="email-form"><br />
<h6>Get Email Updates</h6><br />
<form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<b><span style="color: red;">ID Feddburner Anda Disini</span></b>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br />
<input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Enter Your Email Address"><br />
<input type="hidden" value="<b><span style="color: red;">ID Feedburner Anda Disini</span></b>" name="uri"><br />
<input type="hidden" name="loc" value="en_US"><br />
<input class="button" type="submit" value="Hook Me Up"><br />
<p><br />
We never encourage SPAM<br />
<br><br />
You can Unsubscribe any time<br />
</p><br />
</form><br />
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;<br />
   "><br />
 <a style="color:#000000;" href="http://bit.ly/EmailSubscriptionWidget">Widget</a> </span><br />
</div><br />
</li><br />
</ul><br />
</div><br />
<style><br />
 #sidebars {<br />
    border: 0 none;<br />
    float: right;<br />
    padding: 0 15px;<br />
    width: 310px;<br />
}<br />
#email-notice {<br />
    background: none repeat scroll 0 0 #DF6001;<br />
    color: #FFFFFF;<br />
    font-size: 14px;<br />
    line-height: 1.5;<br />
    margin: 0 0 20px;<br />
    padding: 15px 20px;<br />
    position: relative;<br />
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);<br />
}<br />
#email-notice span {<br />
    border-left: 14px solid transparent;<br />
    border-right: 14px solid transparent;<br />
    border-top: 10px solid #DF6001;<br />
    bottom: -10px;<br />
    height: 0;<br />
    position: absolute;<br />
    right: 40px;<br />
    width: 0;<br />
}<br />
#email-form {<br />
    background: none repeat scroll 0 0 padding-box #313131;<br />
    border-bottom: 5px solid #202020;<br />
    border-radius: 2px 2px 2px 2px;<br />
    text-shadow: 0 -1px 0 #000000;<br />
}<br />
#email-form h6 {<br />
    color: #FFFFFF;<br />
    font-family: arial;<br />
    font-size: 16px;<br />
    font-weight: bold;<br />
    letter-spacing: 0;<br />
    padding: 15px 20px 0;<br />
    text-transform: none;<br />
}<br />
#email-form form {<br />
    color: #FFFFFF;<br />
    margin: 0;<br />
    padding: 20px 18px;<br />
}<br />
#email-form input.input-text {<br />
    background: none repeat scroll 0 0 #FFFFFF;<br />
    border: 1px solid #222222;<br />
    margin: 0 0 10px;<br />
    padding: 8px;<br />
    width: 94%;<br />
}<br />
#email-form .button {<br />
    background: none repeat scroll 0 0 #FFFFFF;<br />
    float: right;<br />
    margin: 0 0 0 10px;<br />
}<br />
#email-form p {<br />
    color: #CCCCCC;<br />
    font-size: 12px;<br />
    line-height: 18px;<br />
    margin: 0;<br />
}<br />
#sidebar-social {<br />
    float: left;<br />
    font-size: 12px;<br />
    margin: 0 0 15px;<br />
    width: 100%;<br />
}<br />
ul.sidebar_list {<br />
    list-style: none outside none;<br />
}<br />
li.widget ul {<br />
    list-style: none outside none;<br />
}<br />
#social-profiles {<br />
    float: left;<br />
}<br />
#social-profiles ul {<br />
    float: left;<br />
    list-style: none outside none;<br />
    margin: 0 5px 20px;<br />
}<br />
#social-profiles ul li {<br />
    float: left;<br />
}<br />
#social-profiles ul li a {<br />
    display: block;<br />
    float: left;<br />
    height: 32px;<br />
    margin: 0 15px;<br />
    text-indent: -999em;<br />
    width: 32px;<br />
}<br />
#social-profiles a.social {<br />
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZY-_XcLfqXAgo-88Pu2sGxwD7SaIB4uarru4BFx5470VIl7EzaX3CPIK5nKbr5fS-_JReSa0a-Vfq5bcJwPnSiSzljFkA21m9VnZPymDEkBh9cI3JoN3lttFReHvLsiNpQN8V1UD90g4/s1600/social.png") no-repeat scroll 0 0 transparent;<br />
}<br />
#social-profiles a.facebook {<br />
    background-position: -79px 0;<br />
    height: 32px;<br />
    margin: 0 15px 0 5px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.facebook:hover {<br />
    background-position: -79px -74px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.twitter {<br />
    background-position: -5px -111px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.twitter:hover {<br />
    background-position: -42px 0;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.youtube {<br />
    background-position: -42px -37px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.youtube:hover {<br />
    background-position: -5px -37px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.rss {<br />
    background-position: -42px -74px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.rss:hover {<br />
    background-position: -79px -37px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.googleplus {<br />
    background-position: -5px 0;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
#social-profiles a.googleplus:hover {<br />
    background-position: -5px -74px;<br />
    height: 32px;<br />
    width: 32px;<br />
}<br />
* {<br />
    margin: 0;<br />
    padding: 0;<br />
}<br />
.custom .sidebar ul.sidebar_list {<br />
    padding: 15px 0;<br />
}<br />
</style> </blockquote>
<br />
<br />
<br />
<div class="series" style="background-attachment: scroll; background-color: #9fcfff; background-image: url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(9, 156, 238); color: #444444; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Pilih Widget yang Anda inginkan dan ganti kode yang <span style="color: red;">diwarnai</span> dengan ID Profiles Social Anda, sobat. Good Luck!!!</div>
Semoga Bermanfaat Tutor Article nya.</div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Social Media Dengan Kotak Berlangganan Keren Untuk Blogger

Hai sobat blogger, lama saya tidak mengepost widget untuk blogger lagi. Widget ini cukup keren dan elegan untuk Anda pasang ke blog Anda. Lanjutan Widget Sosial memberi Anda terlihat seperti widget profesional untuk kotak berlangganan widget yang me…

Widget Profiles Social Melayang Dengan Subscribe Box Dengan Tombol Minimize Untuk Blogger

2/04/2013 01:39:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxaQ7GI88joPVUmc9vA87G0BZyHxvj8NNWZGtXXWymCuzCPuaomzDzPBMSYsbraOUSnABVt1gDNh9DpgfmqchMvBxsqd6g7VkDxMve47Aw_8L7yw622baZyn3AJ_liSxkDkgs026FX4gV/s1600/widgetLogo.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxaQ7GI88joPVUmc9vA87G0BZyHxvj8NNWZGtXXWymCuzCPuaomzDzPBMSYsbraOUSnABVt1gDNh9DpgfmqchMvBxsqd6g7VkDxMve47Aw_8L7yw622baZyn3AJ_liSxkDkgs026FX4gV/s1600/widgetLogo.gif" /></a></div>
<br />
Hai sobat blogger, yang membuat saya lemas ini bingung mau buat postingan yang berguna buat sobat semua. Tapi dengan widget yang saya copy dari source blog bule <a href="http://www.exeideas.com/">http://www.exeideas.com</a> walau dengan sembarangan dan gamblang saja, saya copy source widget melayang ini dengan tombol minimize seperti judul tentunya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="series" style="background-attachment: scroll; background-color: #9fcfff; background-image: url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(9, 156, 238); color: #444444; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Fitur :<br />
<ol>
<li>Minimize button</li>
<li>Profiles Social button dengan efek hover.</li>
<li>Subscribe box dengan CSS button.</li>
</ol>
</div>
<div style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;">
<b>Langkah :</b></div>
<div style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;">
<b><br /></b></div>
<div style="background-color: white; text-align: justify;">
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"></span></span><br />
<div style="font-weight: bold;">
<ul><span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke menu Layout/tata letak > Add Gadget > HTML/Javascript</li>
<li>Pastekan kode dibawah ini :</li>
</span></span></ul>
</div>
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<br />
<blockquote class="tr_bq">
<div style="color: #111111;">
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"><style type="text/css">#exefixedfootermain{z-index:999999;width:300px;height:0px;position:fixed;bottom:0%;right:5px}#exefixedfooterdiv{border-top:3px solid #444;border-right:3px solid #444;border-left:3px solid #444;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;background-color:#d7d7d7;overflow:none;width:300px;height:250px;position:fixed;bottom:0%;right:5px;background:#fff;background:-moz-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#e5e5e5));background:-webkit-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-o-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-ms-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:linear-gradient(to bottom, #fff 0%,#e5e5e5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#e5e5e5',GradientType=0 )}</span></span></div>
<div style="color: #111111;">
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">#exefixedfooterhide{z-index:999999; position: absolute;    bottom:250px;right:5px;width:285px;height:25px;cursor:pointer;background-color:#fff;padding-top:5px;border-top:3px solid #444;border-left:3px solid #444;border-right:3px solid #444;border-top-right-radius:5px;border-top-left-radius:5px;}</span></span></div>
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"><span style="color: #111111;">#exefixedfootershow{position:absolute;    bottom:0px;    right:5px;    width:285px;height:25px;cursor:pointer;background-color:#e5e5e5;padding-top:5px;border-top:3px solid #444;border-left:3px solid #444;border-right:3px solid #444;border-top-right-radius:5px;border-top-left-radius:5px}.exefixedfooterdownarrow{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333}.exefixedfooteruparrow{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #333}.exefixedfooterblockarrow{width:8px;height:10px;background-color:#333}#exefixedfootersocial{    position:absolute;    bottom:220px;    right:10px;    width:280px;height:30px;float:right}#exefixedfootersocialicon{    position:absolute;    bottom:135px;    left:10px;    width:auto;height:64px}#exefixedfooteremailsubscribe{    position:absolute;    bottom:0px;    width:242px;height:90px;right:30px}.exefixedfooteremailsubscribebox input.email{padding:7px 10px 7px 10px;font-family:"Arial","Helvetica",sans-serif;width:218px;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.exefixedfooteremailsubscribebox input.subscribe{    -moz-box-shadow:inset 0px 1px 0px 0px #fff;-webkit-box-shadow:inset 0px 1px 0px 0px #fff;box-shadow:inset 0px 1px 0px 0px #fff;background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f0f0f0),color-stop(1,#c9c9c9) );background:-moz-linear-gradient( center top,#f0f0f0 5%,#c9c9c9 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0',endColorstr='#c9c9c9');background-color:#f0f0f0;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777;font-family:arial;font-size:13px;font-weight:bold;padding:6px 18px;text-decoration:none;text-shadow:1px 1px 0px #fff}.exefixedfooteremailsubscribebox input.subscribe:hover{background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c9c9c9),color-stop(1,#f0f0f0) );background:-moz-linear-gradient( center top,#c9c9c9 5%,#f0f0f0 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9c9c9',endColorstr='#f0f0f0');background-color:#c9c9c9}</style><div id="exefixedfootermain"><center id="exefixedfootershow"onmouseup="document.getElementById('exefixedfooterdiv').style.display='block'"><table  style="margin-top:-2px;"><tr><td><center style="color:#333;font-size:15px;font-weight:bold;"></span><b><span style="color: #bf9000;">Be Socialized And Subscribed</span></b><span style="color: #111111;"></center></td><td><center><div class="exefixedfooteruparrow"></div><div class="exefixedfooterblockarrow"></div></center></td></tr></table></center><div id="exefixedfooterdiv"><center id="exefixedfooterhide"onmouseup="document.getElementById('exefixedfooterdiv').style.display='none'"><table  style="margin-top:-2px;"><tr><td><center style="color:#333;font-size:15px;font-weight:bold;"></span><span style="color: #bf9000;"><b>Be Socialized And Subscribed</b></span><span style="color: #111111;"></center></td><td><center><div class="exefixedfooterblockarrow"></div><div class="exefixedfooterdownarrow"></div></center></td></tr></table></center><div id="exefixedfootersocial"><center style="color:#333;font-size:12px;"></span><span style="color: #bf9000;"><b>Recive All Latest And Hottest Articles,Tips And Tricks,Awesome Widgets Directly Into Your Inbox And Stay UpDate With Us...!!!</b></span><span style="color: #111111;"></center></div><div id="exefixedfootersocialicon"><table><tr><td><a href="http://www.facebook.com/</span><b><span style="color: blue;">ID Facebook Anda</span></b><span style="color: #111111;">"><img height="48px"width="48px"title="Like Us On Facebook"alt="Facebook"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBXW3X2CO68Pm8xgdK-bLgl801qy9csmspXek4RVMdtRXIcTt42jX7aYmvC7VBxX8dJFiR2uWDT0Ae-BvUgfOYpQPMRcSPkCalVObyUkcl4qUD3Uy_Z4rgn9Gn5f_baOQr96xyBKWKd7w/s1600/Facebook+Icon.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQV44IiLLz5thOY92RYkq7K82Bwbbr1p8qHljfKgejs8g_dB1TVfj0seGcE3l3daZyD_mhBun0Bu4V5qa2jFUh-pcprXyKLOrn5kgy7F6EtOQJw6pup-rqltmJHHifg47wJXFPbhloRnNC/s1600/Facebook+Rollout+Image.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBXW3X2CO68Pm8xgdK-bLgl801qy9csmspXek4RVMdtRXIcTt42jX7aYmvC7VBxX8dJFiR2uWDT0Ae-BvUgfOYpQPMRcSPkCalVObyUkcl4qUD3Uy_Z4rgn9Gn5f_baOQr96xyBKWKd7w/s1600/Facebook+Icon.png'"/></a><br /><a href="http://twitter.com/</span><span style="color: cyan;"><b>ID Twitter Anda</b></span><span style="color: #111111;">"><img height="48px"width="48px"title="Follow Me On Twitter"alt="Twitter"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5K1CapoL0P_bXiuocYBGW-vSigFXOcJr7Siwy0DMbpiLSWQseW2Fh2tk60zeLAVXSyPc5WFsQwqQBkgci7xUOovIczhF1yF3jpp8vjAnPg-cQUcpWrf6rLHqVdzTKOnm11nnKoeZAhxpd/s1600/Twitter+Icon.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyV68hQt8u8ppIPdATkn9wBTIGsb2kSScy29B69nBY_UDBMwoViA_Gom5hNEpNpipTFK87F51HlUpTvwAgctYorSuUzqZ-tF_m6SzwSufqE13lUiR_GQNgybAnh68n9EKyZCfP1o0hzNT5/s1600/Twitter+Rollout+Image.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5K1CapoL0P_bXiuocYBGW-vSigFXOcJr7Siwy0DMbpiLSWQseW2Fh2tk60zeLAVXSyPc5WFsQwqQBkgci7xUOovIczhF1yF3jpp8vjAnPg-cQUcpWrf6rLHqVdzTKOnm11nnKoeZAhxpd/s1600/Twitter+Icon.png'"/></a></td><td width="75px"valign="top"><a style="font-size:12px;color:#333;font-weight:bold;"href="http://www.facebook.com/ID Facebook Anda">Like Us On FaceBook</a><br /><br /><a style="font-size:12px;color:#333;font-weight:bold;"href="http://twitter.com/</span><b><span style="color: cyan;">ID Twitter Anda</span></b><span style="color: #111111;">">Follow Us On Twitter</a></td><td><a href="https://plus.google.com/102256859586166648016"><img height="48px"width="48px"title="Add Us To Your Circle"alt="Google Plus"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufs9rBGbzsa1loiKsW7rA5attothXaYYLdRh_jRZwvL8dXRKxKQo9iYQvbUDy_V8NdMTvq8lMIP0IcnGAwWAE3RQBiAIQt91jyi3e0ktsMhrR5ha0P09_HdGnLKcdi8V-KSvlvkTqxSS6/s1600/Google+Icon.pngE"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDx_mioGHraK39H6xtmkt_qqwpyo8dJQswDQK2d1q-gqxZUv0qQXHIgxGKIgUARNr0_VycLF-ZNZmJJLZAWr4iNlGTSPr4BLUNNkyOxIBMG5JfDZjI7fshC8z0hqFYlgZmSSPSGt1psMmH/s1600/Google+Rollout+Image.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufs9rBGbzsa1loiKsW7rA5attothXaYYLdRh_jRZwvL8dXRKxKQo9iYQvbUDy_V8NdMTvq8lMIP0IcnGAwWAE3RQBiAIQt91jyi3e0ktsMhrR5ha0P09_HdGnLKcdi8V-KSvlvkTqxSS6/s1600/Google+Icon.png'"/></a><br /><a href="http://feeds.feedburner.com/</span><b><span style="color: red;">ID Feedburner Anda</span></b><span style="color: #111111;">"><img height="48px"width="48px"title="Subscribe Our RSS"alt="RSS"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVlMgmfIdgUAIxnsR3VLg5_DdzkoUTWjUQLCGuKn6YVb1WGJnCPUteD9l_np9U2V_Gc0GgBT4DqzOSOaI_l5woGG4fW3tlAhW1lToZEYdh3R34m3Eq9XxWLv8IceLqlNcVXDSDi8tmN4xr/s1600/Feedburner+Icon.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUXb1778x9n3JtfUgOJD5B1hHu04ARnXAAZGP3ponz0cspafND5gCtTrUAWZLLixyRt1f5lZ7t5DU9aFnSfA4dIPBdtr1UDHVLqkoC-mOYk-kgxxYmcm3Y3RVqjWyATuo4KrwG8l1u-r7/s1600/Feedburner+Rollout+Image.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVlMgmfIdgUAIxnsR3VLg5_DdzkoUTWjUQLCGuKn6YVb1WGJnCPUteD9l_np9U2V_Gc0GgBT4DqzOSOaI_l5woGG4fW3tlAhW1lToZEYdh3R34m3Eq9XxWLv8IceLqlNcVXDSDi8tmN4xr/s1600/Feedburner+Icon.png'"/></a></td><td valign="top"><a style="font-size:12px;color:#333;font-weight:bold;"href="https://plus.google.com/102256859586166648016">Add Me <br />In Circle</a><br /><br /><a style="font-size:12px;color:#333;font-weight:bold;"href="http://feeds.feedburner.com/</span><span style="color: red;"><b>ID Feedburner Anda</b></span><span style="color: #111111;">">Subscribe <br />Our RSS</a></td></tr></table></div><div id="exefixedfooteremailsubscribe"><div class="exefixedfooteremailsubscribebox"><form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=exefixedfootersocialicon','popupwindow','scrollbars=yes,width=550,height=520');return true"><input class="email"type="text"id="email"name="email"value="Enter Your Email Here.."onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/><input type="hidden"value="</span><span style="color: red;"><b>ID Feedburner Anda</b></span><span style="color: #111111;">"name="uri"/><input type="hidden"name="loc"value="en_US"/><br /><input class="subscribe"name="commit"type="submit"value="Subscribe Our News Letter Now"/></form></div><center style="color:#333;font-size:8px;">E-Mail Will Be Delivered By FeedBurner.</center></div></div></div></span></span></span></blockquote>
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<br />
<div style="background-color: white; color: #111111; text-align: justify;">
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"><span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;"><br /></span></span></span></span></div>
<span style="font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<div class="info" style="background-attachment: scroll; background-color: #dfe7fe; background-image: url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(146, 202, 228); color: #205791; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em;">
Keterangan :<br />
<ul>
<li>Ganti <span style="color: blue;">ID Facebook Anda</span> dengan ID Facebook Anda.</li>
<li>Ganti <span style="color: cyan;">ID Twitter Anda</span> dengan ID Twitter Anda.</li>
<li>Ganti <span style="color: red;">ID Feedburner Anda</span> dengan ID Feedburner Anda.</li>
</ul>
</div>
<div style="color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px;">
    </div>
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<br />
<ul><span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
<li> <span style="font-size: 13px;">Save and HAVE FUN sobat.</span> </li>
</span></span></ul>
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span>
<br />
<div>
<div style="font-size: 13px;">
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">Terima kasih, semoga bermanfaat.</span></span></div>
<div style="font-size: 13px;">
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">Sumber kode source : <a href="view-source:http://www.blogger.com/www.exeideas.com" style="color: #0956a8; text-decoration: initial;" target="_blank">view-source:www.exeideas.com</a></span></span></div>
</div>
<span style="color: #111111; font-family: Tahoma; font-size: x-small;"><span style="line-height: 19.5px;">
</span></span></div>
<div style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;">
<ol></ol>
</div>
<br />
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Widget Profiles Social Melayang Dengan Subscribe Box Dengan Tombol Minimize Untuk Blogger

Hai sobat blogger, yang membuat saya lemas ini bingung mau buat postingan yang berguna buat sobat semua. Tapi dengan widget yang saya copy dari source blog bule http://www.exeideas.com walau dengan sembarangan dan gamblang saja, saya copy source wid…

Membuat Objek Keren Pada Kursor Mouse di Blogger

2/04/2013 01:32:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTo8tH2iWYISS8XGukzPri7vJX2JDTKvBfJMMHfir23Ns99o27c1jaq9gtA2ZFEepW0mSp9oFmVH4axySy9HmqbC5jOmR69r7xAnvxUfGe4cLn7xwtCkLtfO3ztpkx-4k_FI36dRF3-oT/s1600/cursor_XP.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTo8tH2iWYISS8XGukzPri7vJX2JDTKvBfJMMHfir23Ns99o27c1jaq9gtA2ZFEepW0mSp9oFmVH4axySy9HmqbC5jOmR69r7xAnvxUfGe4cLn7xwtCkLtfO3ztpkx-4k_FI36dRF3-oT/s1600/cursor_XP.png" width="320" /></a></div>
<br />
Membuat Objek Berputar-putar Pada Kursor Mouse di Blogger - D-Copy Blog | Bagaimana cara Anda untuk mendapatkan perhatian pengunjung Anda? Membuat konten berkualitas? Membuat blog indah dipandang mata? atauu membuat objek pada kursor mouse di blog Anda? Yapp kali ini kita akan membahas bagaimana membuat objek pada kursor mouse.<br />
<br />
<span style="font-size: large;">Gaya Pertama :</span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke menu <b>tata letak/layout > add gadget > HTML/Javascript</b></li>
<li>Pastekan kode dibawah ini dan save.</li>
</ul>
<br />
<blockquote class="tr_bq">
<script language="JavaScript" type="text/javascript"><br />
<b><span style="color: red;">var xCol = "#FF0000";</span></b><br />
<b><span style="color: red;">var yCol = "#FFFF00";</span></b><br />
<b><span style="color: red;">var zCol = "#0000FF";</span></b><br />
var n = 6; //number of dots per trail.<br />
var t = 40; //setTimeout speed.<br />
var s = 0.2; //effect speed.<br />
var r,h,w;<br />
var d = document;<br />
var my = 10;<br />
var mx = 10;<br />
var stp = 0;<br />
var evn = 360/3;<br />
var vx = new Array();<br />
var vy = new Array();<br />
var vz = new Array();<br />
var dy = new Array();<br />
var dx = new Array();<br />
var pix = "px";<br />
var strictmod = ((document.compatMode) &&<br />
document.compatMode.indexOf("CSS") != -1);<br />
var domWw = (typeof window.innerWidth == "number");<br />
var domSy = (typeof window.pageYOffset == "number");<br />
var idx = d.getElementsByTagName('div').length;<br />
for (i = 0; i < n; i++)<br />
{<br />
var dims = (i+1)/2;<br />
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'<br />
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'<br />
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'<br />
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'<br />
+'left:0px;width:'+dims+'px;height:'+dims+'px;'<br />
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'<br />
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'<br />
+'left:0px;width:'+dims+'px;height:'+dims+'px;'<br />
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');<br />
}<br />
if (domWw) r = window;<br />
else<br />
{<br />
if (d.documentElement &&<br />
typeof d.documentElement.clientWidth == "number" &&<br />
d.documentElement.clientWidth != 0)<br />
r = d.documentElement;<br />
else<br />
{<br />
if (d.body && typeof d.body.clientWidth == "number")<br />
r = d.body;<br />
}<br />
}<br />
function winsize()<br />
{<br />
var oh,sy,ow,sx,rh,rw;<br />
if (domWw)<br />
{<br />
if (d.documentElement && d.defaultView &&<br />
typeof d.defaultView.scrollMaxY == "number")<br />
{<br />
oh = d.documentElement.offsetHeight;<br />
sy = d.defaultView.scrollMaxY;<br />
ow = d.documentElement.offsetWidth;<br />
sx = d.defaultView.scrollMaxX;<br />
rh = oh-sy;<br />
rw = ow-sx;<br />
}<br />
else<br />
{<br />
rh = r.innerHeight;<br />
rw = r.innerWidth;<br />
}<br />
h = rh;<br />
w = rw;<br />
}<br />
else<br />
{<br />
h = r.clientHeight;<br />
w = r.clientWidth;<br />
}<br />
}<br />
function scrl(yx)<br />
{<br />
var y,x;<br />
if (domSy)<br />
{<br />
y = r.pageYOffset;<br />
x = r.pageXOffset;<br />
}<br />
else<br />
{<br />
y = r.scrollTop;<br />
x = r.scrollLeft;<br />
}<br />
return (yx == 0)?y:x;<br />
}<br />
function mouse(e)<br />
{<br />
var msy = (domSy)?window.pageYOffset:0;<br />
if (!e) e = window.event;<br />
if (typeof e.pageY == 'number')<br />
{<br />
my = e.pageY - msy + 16;<br />
mx = e.pageX + 6;<br />
}<br />
else<br />
{<br />
my = e.clientY - msy + 16;<br />
mx = e.clientX + 6;<br />
}<br />
if (my > h-65) my = h-65;<br />
if (mx > w-50) mx = w-50;<br />
}<br />
function assgn()<br />
{<br />
for (j = 0; j < 3; j++)<br />
{<br />
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *<br />
Math.sin((stp+j*25)/2) + scrl(0) + pix;<br />
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *<br />
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;<br />
}<br />
stp+=s;<br />
for (i = 0; i < n; i++)<br />
{<br />
if (i < n-1)<br />
{<br />
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;<br />
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;<br />
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;<br />
}<br />
else<br />
{<br />
vx[i].top = dy[0]; vx[i].left = dx[0];<br />
vy[i].top = dy[1]; vy[i].left = dx[1];<br />
vz[i].top = dy[2]; vz[i].left = dx[2];<br />
}<br />
}<br />
setTimeout(assgn,t);<br />
}<br />
function init()<br />
{<br />
for (i = 0; i < n; i++)<br />
{<br />
vx[i] = document.getElementById("x"+(idx+i)).style;<br />
vy[i] = document.getElementById("y"+(idx+i)).style;<br />
vz[i] = document.getElementById("z"+(idx+i)).style;<br />
}<br />
winsize();<br />
assgn();<br />
}<br />
if (window.addEventListener)<br />
{<br />
window.addEventListener("resize",winsize,false);<br />
window.addEventListener("load",init,false);<br />
document.addEventListener("mousemove",mouse,false);<br />
}<br />
else<br />
if (window.attachEvent)<br />
{<br />
window.attachEvent("onload",init);<br />
document.attachEvent("onmousemove",mouse);<br />
window.attachEvent("onresize",winsize);<br />
}<br />
</script></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;">Gaya Kedua:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>Masih pada langkah-langkah pada gaya pertama pastekan kode dibawah ini :</li>
</ul>
<br />
<blockquote class="tr_bq">
<script type="text/javascript" src="http://programisjs.googlecode.com/files/bubblecursor.js"></script><script type="text/javascript"><br />
// <![CDATA[<br />
var colours=new Array("<b><span style="color: red;">#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF</span></b>"); // colours for top, right, bottom and left borders and background of bubbles<br />
var bubbles=100; // maximum number of bubbles on screen<br />
var x=ox=400;<br />
var y=oy=300;<br />
var swide=800;<br />
var shigh=600;<br />
var sleft=sdown=0;<br />
var bubb=new Array();<br />
var bubbx=new Array();<br />
var bubby=new Array();<br />
var bubbs=new Array();<br />
window.onload=function() { if (document.getElementById) {<br />
var rats, div;<br />
for (var i=0; i<bubbles; i++) {<br />
rats=createDiv("3px", "3px");<br />
rats.style.visibility="hidden";<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.top="1px";<br />
div.left="0px";<br />
div.bottom="1px";<br />
div.right="0px";<br />
div.borderLeft="1px solid "+colours[3];<br />
div.borderRight="1px solid "+colours[1];<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.top="0px";<br />
div.left="1px";<br />
div.right="1px";<br />
div.bottom="0px"<br />
div.borderTop="1px solid "+colours[0];<br />
div.borderBottom="1px solid "+colours[2];<br />
div=createDiv("auto", "auto");<br />
rats.appendChild(div);<br />
div=div.style;<br />
div.left="1px";<br />
div.right="1px";<br />
div.bottom="1px";<br />
div.top="1px";<br />
div.backgroundColor=colours[4];<br />
div.opacity=0.5;<br />
if (document.all) div.filter="alpha(opacity=50)";<br />
document.body.appendChild(rats);<br />
bubb[i]=rats.style;<br />
}<br />
set_scroll();<br />
set_width();<br />
bubble();<br />
}}<br />
function bubble() {<br />
var c;<br />
if (x!=ox || y!=oy) {<br />
ox=x;<br />
oy=y;<br />
for (c=0; c<bubbles; c++) if (!bubby[c]) {<br />
bubb[c].left=(bubbx[c]=x)+"px";<br />
bubb[c].top=(bubby[c]=y)+"px";<br />
bubb[c].width="3px";<br />
bubb[c].height="3px"<br />
bubb[c].visibility="visible";<br />
bubbs[c]=3;<br />
break;<br />
}<br />
}<br />
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);<br />
setTimeout("bubble()", 40);<br />
}<br />
function update_bubb(i) {<br />
if (bubby[i]) {<br />
bubby[i]-=bubbs[i]/2+i%2;<br />
bubbx[i]+=(i%5-2)/5;<br />
if (bubby[i]>sdown && bubbx[i]>0) {<br />
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {<br />
bubb[i].width=bubbs[i]+"px";<br />
bubb[i].height=bubbs[i]+"px";<br />
}<br />
bubb[i].top=bubby[i]+"px";<br />
bubb[i].left=bubbx[i]+"px";<br />
}<br />
else {<br />
bubb[i].visibility="hidden";<br />
bubby[i]=0;<br />
return;<br />
}<br />
}<br />
}<br />
document.onmousemove=mouse;<br />
function mouse(e) {<br />
set_scroll();<br />
y=(e)?e.pageY:event.y+sleft;<br />
x=(e)?e.pageX:event.x+sdown; }<br />
window.onresize=set_width;<br />
function set_width() {<br />
if (document.documentElement && document.documentElement.clientWidth) {<br />
swide=document.documentElement.clientWidth;<br />
shigh=document.documentElement.clientHeight;<br />
}<br />
else if (typeof(self.innerHeight)=="number") {<br />
swide=self.innerWidth;<br />
shigh=self.innerHeight;<br />
}<br />
else if (document.body.clientWidth) {<br />
swide=document.body.clientWidth;<br />
shigh=document.body.clientHeight;<br />
}<br />
else {<br />
swide=800;<br />
shigh=600;<br />
}<br />
}<br />
window.onscroll=set_scroll;<br />
function set_scroll() {<br />
if (typeof(self.pageYOffset)=="number") {<br />
sdown=self.pageYOffset;<br />
sleft=self.pageXOffset;<br />
}<br />
else if (document.body.scrollTop || document.body.scrollLeft) {<br />
sdown=document.body.scrollTop;<br />
sleft=document.body.scrollLeft;<br />
}<br />
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br />
sleft=document.documentElement.scrollLeft;<br />
sdown=document.documentElement.scrollTop;<br />
}<br />
else {<br />
sdown=0;<br />
sleft=0;<br />
}<br />
}<br />
function createDiv(height, width) {<br />
var div=document.createElement("div");<br />
div.style.position="absolute";<br />
div.style.height=height;<br />
div.style.width=width;<br />
div.style.overflow="hidden";<br />
return (div);<br />
}<br />
// ]]><br />
</script></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="font-size: large;"><b>Gaya Ketiga :</b></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>Masih pada langkah 1 diatas, pastekan kode dibawah ini :</li>
</ul>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<b><script src="<span style="color: #e69138;">URL JS</span>" type="text/javascript"></script></b></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" dir="rtl" style="clear: both; text-align: right;">
<b>Note</b> : untuk <b><span style="color: #e69138;">URL JS</span></b>, tukarkan dengan kod berikut mengikut warna sprakle yang anda kehendaki</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b><span style="color: #6aa84f; font-family: Courier New, Courier, monospace;">Code JS yang Diatas PilihSalah Satu Dari Bawah Ini</span></b></div>
<div class="separator" style="clear: both;">
</div>
<blockquote class="tr_bq">
<ul style="text-align: left;">
<li><b>Biru - <span style="color: #e69138;">http://programisjs.googlecode.com/files/biru.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Hitam - <span style="color: #e69138;">http://programisjs.googlecode.com/files/black.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>hijau - <span style="color: #e69138;">http://programisjs.googlecode.com/files/lawngreen.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Ungu - <span style="color: #e69138;">http://programisjs.googlecode.com/files/purple.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Putih - <span style="color: #e69138;">http://programisjs.googlecode.com/files/putih.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Pink - <span style="color: #e69138;">http://programisjs.googlecode.com/files/salmon.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Kuning - <span style="color: #e69138;">http://programisjs.googlecode.com/files/yellow.js</span></b></li>
</ul>
<ul style="text-align: left;">
<li><b>Hijau kebiruan - <span style="color: #e69138;">http://programisjs.googlecode.com/files/aqua.js</span></b></li>
</ul>
</blockquote>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodnya adalah:</div>
<blockquote class="tr_bq">
<script src="https://sites.google.com/site/unwanted86/javascript/biru.js" type="text/javascript"></script></blockquote>
<div>
<br /></div>
<div>
<div class="success" style="background-attachment: scroll; background-color: #ccfebf; background-image: url(http://3.bp.blogspot.com/-Ey_f4tLqWaw/UD-xsS60hmI/AAAAAAAAA28/q8aIYetyEwc/s1600/MBT+success.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(198, 216, 128); color: #264409; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Keterangan : Ubah warna kode yang telah <span style="color: red;">diwarnai</span> diatas.</div>
Terima Kasih Semoga Tutor Nya Bermanfaat</div>
<br />
<div class="separator" style="clear: both;">
<span style="font-size: large;"><br /></span></div>
<br />
<span style="font-size: large;"><br /></span>
</div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Membuat Objek Keren Pada Kursor Mouse di Blogger

Membuat Objek Berputar-putar Pada Kursor Mouse di Blogger - D-Copy Blog | Bagaimana cara Anda untuk mendapatkan perhatian pengunjung Anda? Membuat konten berkualitas? Membuat blog indah dipandang mata? atauu membuat objek pada kursor mouse di blog A…

Widget Profiles Sosial Bookmark Versi Angry Birds Untuk Blogger

2/04/2013 01:26:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKJG0yOxpAcDwYDc66a1RsyhfOfsFqhvWqwdSfrrhaU2S7-3meOlt337H6LjNfQ62AIeNBVMf_07LTVkb1oV6Wv1wzQpVOzOUZyVVIG5QcYP7gRYyR_15eP87D87nMo5J1WETY47vzLSn/s1600/angry-birds-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKJG0yOxpAcDwYDc66a1RsyhfOfsFqhvWqwdSfrrhaU2S7-3meOlt337H6LjNfQ62AIeNBVMf_07LTVkb1oV6Wv1wzQpVOzOUZyVVIG5QcYP7gRYyR_15eP87D87nMo5J1WETY47vzLSn/s1600/angry-birds-.jpg" /></a></div>
<br />
Widget Profiles Sosial Angry Birds Untuk Blogger - Sharing Blog | Hai sobat blogger, tutorial kali ini kita akan membahas widget social sharring widget "Angry Birds" untuk blogger. Widget ini didesain unyu-unyu yang cocok untuk akun blog Anda.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Langkah :</div>
<div class="separator" style="clear: both;">
</div>
<ol style="text-align: left;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke menu layout > Add gadget > HTML/Javascript</li>
<li>Cari kode dibawah ini :</li>
</ol>
<br />
<blockquote class="tr_bq">
]]></b:skin></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
     4.  Pastekan kode dibawah ini diatas pada kode diatas :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.bubblewrap{<br />
list-style-type:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
.bubblewrap li{<br />
display:inline;<br />
width: 60px;<br />
height:60px;<br />
}<br />
.bubblewrap li img{<br />
width: 50px; /* width of each image.*/<br />
height: 50px; /* height of each image.*/<br />
border:0;<br />
margin-right: 4px; /*spacing between each image*/<br />
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */<br />
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */<br />
}<br />
.bubblewrap li img:hover{<br />
-moz-transform:scale(1.8); /*scale up image 1.8x*/<br />
-webkit-transform:scale(1.8);<br />
-o-transform:scale(1.8);<br />
}</blockquote>
<div class="separator" style="clear: both;">
     5.  Save Template Anda.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
     6.  Masuk ke menu Layout (Tata Letak) <b>> Add Gadget > HTML/Javascript</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
     7.  Pastekan kode dibawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<ul class="bubblewrap"><br />
<li><a href="http://www.plus.google.com/<span style="color: #20124d;"><b>ID Google Plus Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0nxRI8OQ1qqqyUaKsBK3v4RbOHnyTIDuboHev3k7x92_XKtHcly_K0EimmMlROLTKRde_8nxMj3yKFlzmGDyFWomAYOm7nB0VifjEGv0ol4DIwqR908cYvoKt2SCm2GJkvdkIfsXhoU/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li><br />
<li><a href="http://www.facebook.com/<span style="color: #134f5c;"><b>ID akun Facebook Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUDbdYpEtkWiJ_ER3TxoC_Ybvo2J9-3vE2vE0ldsNxkJw63kSRmYwhE9EWTFTL_fhmCe-k7A1_pKQ9U8FooIqiyiPwXpCtZgr1mHgDCzvo5hB12dQj6G75PqeV9Kn4LuhCeva1l5-oOQ4/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li><br />
<li><a href="http://www.youtube.com/<span style="color: #6aa84f;"><b>ID Youtube Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQJNTrQOMJjkgqcWKWMlaf-dxrbov45b59HLxUpOGso4-hKYtJ61LcovJslvNxi3zEvc9gZ-AS4QVl_QETk8ImSWiLVsRwJ0oSAa9J-2MtymgErTbhlIaoDX1bwLUMdOR4voQ3NBZ-pA/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li><br />
<li><a href="http://www.twitter/<span style="color: orange;"><b>ID Twitter Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqRlg35oztMwRNrrqnyiHno74gYbFo9pionCFElz1JragAB8sD1BlYInNMYP503nFwx9yNfNHw_vKX1B13HmUOZi-h-X3TLcgMhts0U0OPV9kTkFzwtQjY3_XPDW6b7m395HUC83iklLU/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li><br />
<li><a href="http://feeds2.feedburner.com/<span style="color: red;"><b>ID feedburner Anda disini</b></span>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIWnHIbdL6H6vQY4n349a-rRSerAIDFWrarIm1nr4hPZkup0tenFVB1xSk1MUY4DF2-OigD3KepTogI9AZEaDJUZQtHafIb7_ff3XfVXAXJ7xH68gvg2pgwNSojn13fJqYDMF3qNtYYbA/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li><br />
</ul></blockquote>
<div>
<br /></div>
<br />
<br />
<br />
<div class="info" style="background-attachment: scroll; background-color: #dfe7fe; background-image: url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(146, 202, 228); color: #205791; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Keterangan :<br />
<ul>
<li>Ganti kode yang telah diwarnai dan save template Anda.</li>
</ul>
</div>
<span style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;">     8.  Save dan selesai.</span><br />
<br /></div>

Blogger CSS HTML Javascript jQuery SeputarBerita Tips'N'Trik Widget Profiles Sosial Bookmark Versi Angry Birds Untuk Blogger

Widget Profiles Sosial Angry Birds Untuk Blogger - Sharing Blog | Hai sobat blogger, tutorial kali ini kita akan membahas widget social sharring widget "Angry Birds" untuk blogger. Widget ini didesain unyu-unyu yang cocok untuk akun blog Anda. Langk…

5 CSS Breadcrumbs Keren Untuk Blogger

2/04/2013 01:20:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJSrwxgZU3ODB5dZbyu-jd6BE9dpoImp0btmHSvEqLoBu90r8XrJOjyCKMe9nt_gdrtHAw8eRS4mSW697hab1-pYFcbqqvobl1qWXJCQoYTeG8DsseOhE6qAyfkP7JY2gjqjGtMF5gz9w1/s1600/css_logo_medium.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJSrwxgZU3ODB5dZbyu-jd6BE9dpoImp0btmHSvEqLoBu90r8XrJOjyCKMe9nt_gdrtHAw8eRS4mSW697hab1-pYFcbqqvobl1qWXJCQoYTeG8DsseOhE6qAyfkP7JY2gjqjGtMF5gz9w1/s1600/css_logo_medium.png" /></a></div>
<br />
Breadcrumbs adalah navigasi alternatif. Tidak hanya apakah mereka bertindak sebagai alat bantu visual untuk menginformasikan pembaca tentang posisi mereka dalam hirarki blog, tetapi juga memberikan nuansa yang lebih terstruktur.<br />
<br />
<br />
<br />
<div class="notice" style="background-attachment: scroll; background-color: #fff6bf; background-image: url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(255, 211, 36); color: #514721; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
<b>Sebelum Anda mendapatkan Memulai</b><br />
<ol>
<li>Pastikan bahwa Anda sudah memiliki Breadcrumbs di blog Anda. Baca tutorial <a href="http://d-copy.blogspot.com/2012/08/cara-buat-breadcrumb-navigation-di-blogger.html" style="color: #514721; text-decoration: initial;" target="_blank">cara membuat navigasi breadcrumbs di blog</a>.</li>
</ol>
</div>
<br style="background-color: white; color: #111111; font-family: Tahoma; font-size: 13px; line-height: 19.5px; text-align: justify;" />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Langkah :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
</div>
<ol style="text-align: left;">
<li>Buka akun Blogger Anda</li>
<li>Masuk ke Menu Template, centang Expand Template Widget</li>
<li>Pilih desain widget yang Anda sukai dibawah ini dan ganti kode breadcrumbs Anda.</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-CfxewhG7iLw/UHgYg4UNYsI/AAAAAAAABRY/GRi7bOf2eKc/s1600/breadcrumbs5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-CfxewhG7iLw/UHgYg4UNYsI/AAAAAAAABRY/GRi7bOf2eKc/s1600/breadcrumbs5.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<blockquote class="tr_bq">
.breadcrumbs{list-style:none;margin:0}<br />
.breadcrumbs a:last-child{border-right-width:1px!important;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px}<br />
.breadcrumbs a{color:#666;display:block;float:left;font-size:12px;position:relative;text-decoration:none;border:1px solid #D9D9D9;border-right-width:0;background-image:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";background-repeat:no-repeat;background-position:100% 0;z-index:1;padding:7px 16px 7px 19px}<br />
.breadcrumbs a:hover{border-top-color:#c4c4c4;border-bottom-color:#c4c4c4;background-image:0 45% #f8f8f8 73%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";color:#333;-moz-box-shadow:0 2px 2px #e8e8e8;-webkit-box-shadow:0 2px 2px #e8e8e8;box-shadow:0 2px 2px #e8e8e8}<br />
.first,.first:hover{z-index:30!important;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-hp8WXzNdNO4/UHgaTeh0PbI/AAAAAAAABRg/pwK9xJCEbhc/s320/breadcrumbs1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-hp8WXzNdNO4/UHgaTeh0PbI/AAAAAAAABRg/pwK9xJCEbhc/s320/breadcrumbs1.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<blockquote class="tr_bq">
.breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}<br />
.breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}<br />
.breadcrumbs> a:before{content:'';position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}<br />
.breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}<br />
.breadcrumbs a{list-style:none}<br />
.breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:"";position:absolute;top:50%;left:0;display:none}<br />
.breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}<br />
.breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}<br />
.breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}<br />
.breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}<br />
.breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}<br />
.first,.first:hover{z-index:30!important}<br />
.breadcrumbs a:nth-child(2){z-index:31!important}<br />
.breadcrumbs a:nth-child(3){z-index:32!important}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-EBC4yNNauWI/UHgbHD74yRI/AAAAAAAABRo/WrlD9wQYf4o/s320/breadcrumbs2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-EBC4yNNauWI/UHgbHD74yRI/AAAAAAAABRo/WrlD9wQYf4o/s320/breadcrumbs2.PNG" /></a></div>
<blockquote class="tr_bq">
<br />
.breadcrumbs{list-style:none;margin:0}<br />
.breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}<br />
.breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}<br />
.breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}<br />
.breadcrumbs a:nth-child(even):hover{color:#333}<br />
.breadcrumbs a:nth-child(odd):hover{color:#FFF}<br />
.first,.first:hover{z-index:30!important}<br />
.breadcrumbs a:nth-child(2){z-index:29!important}<br />
.breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-S8VimlxxVcE/UHgb7LJuA5I/AAAAAAAABRw/Nmjn_1PLRFg/s400/breadcrumbs3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="52" src="http://1.bp.blogspot.com/-S8VimlxxVcE/UHgb7LJuA5I/AAAAAAAABRw/Nmjn_1PLRFg/s320/breadcrumbs3.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<blockquote class="tr_bq">
 .breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}<br />
.breadcrumbs:before,.breadcrumbs:after{display:table;content:"";zoom:1}<br />
.breadcrumbs:after{clear:both}<br />
.breadcrumbs a{color:#999}<br />
.breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}<br />
.breadcrumbs > a:after{content:'';position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}<br />
.breadcrumbs > a:before{content:'';position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}<br />
.breadcrumbs a :last-child{color:#333}<br />
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}<br />
.breadcrumbs a:hover{text-decoration:none!important}<br />
.breadcrumbs span:hover{color:#666}<br />
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}<br />
.breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}<br />
.breadcrumbs span{margin-top:1px;color:#999}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-MtMzEH4wzaQ/UHgcYuy4NoI/AAAAAAAABR4/mK4JTY1Dzk4/s320/breadcrumbs4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-MtMzEH4wzaQ/UHgcYuy4NoI/AAAAAAAABR4/mK4JTY1Dzk4/s320/breadcrumbs4.PNG" /></a></div>
<blockquote class="tr_bq">
<br />
 .breadcrumbs{list-style:none;margin:0}<br />
.breadcrumbs a span::after{background:#DDD;content:"";height:2.5em;margin-top:-1.25em;position:absolute;right:-1em;top:50%;width:2.5em;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}<br />
.breadcrumbs a{text-decoration:none;color:#444;background:#DDD;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:.4em 0 0 .4em;-webkit-border-radius:.4em 0 0 .4em;border-radius:.4em 0 0 .4em;margin:0 2em 0 0;padding:.7em 1em .7em 2em}<br />
.breadcrumbs a:hover,.breadcrumbs a:hover > span:after{background:#f1f1f1;color:#333}</blockquote>
<br />
Terimah Kasih Telah Berkunjung Dan Membaca Article Saya.<br />
<br />
<div>
<br /></div>
<br />
<br />
<br /></div>
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik 5 CSS Breadcrumbs Keren Untuk Blogger

Breadcrumbs adalah navigasi alternatif. Tidak hanya apakah mereka bertindak sebagai alat bantu visual untuk menginformasikan pembaca tentang posisi mereka dalam hirarki blog, tetapi juga memberikan nuansa yang lebih terstruktur. Sebelum Anda mendapa…

Membuat Recomended Post Yang Muncul Di Akhir Postingan Blogger

2/04/2013 01:14:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;">Kali ini aku ingin berbagi cara untuk membuat rekomended post yang muncul di akhir artikel kamu. Recomended post ini sanget bermanfaat sekali karena dengan menambahkan widget blogger ini, kamu bisa menghindari bounce visitor yang ada di blog kamu. Widget ini bisa membuat pengunjung blog kamu tertarik karena disitu akan diberikan random artikel yang bisa mereka baca juga setelah membaca artikel kamu sebelumnya. Gambar di bawah ini merupakan Screenshoot dari recomended post :</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;"><br /></span></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09aDppa8kqV5C3728_lnCvwP_wAR54q4p59GOPfn1XCZKICbXc3Hvx-rBd9lz4YjiIwDA65XzLDH7q23lFOrURSClQHHCTkPMmMxLJG1_BHeSE5KgywhfLcr0FU7Zng5RxlKNqZIJqBR6/s400/Cara+membuat+recomended+post+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09aDppa8kqV5C3728_lnCvwP_wAR54q4p59GOPfn1XCZKICbXc3Hvx-rBd9lz4YjiIwDA65XzLDH7q23lFOrURSClQHHCTkPMmMxLJG1_BHeSE5KgywhfLcr0FU7Zng5RxlKNqZIJqBR6/s320/Cara+membuat+recomended+post+blogger.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Ingin tau cara membuatnya ?</div>
<div class="separator" style="clear: both;">
Membuat Recomended Post dalam Satu Langkah</div>
<div class="separator" style="clear: both;">
Nah, sebenarnya tidak sulit untuk menambahkan widget ini. Untuk menambahkankan widget ini kamu cukup untuk menekan (klik) gambar di bawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/img/add/add2blogger_lg.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Jika kamu sudah klik gambar tersebut, sebenarnya langkahnya belum selesai sobat. Untuk membuatnya keluar di akhir postingan kamu kamu harus menambahkan Javascript ke dalam template kamu. Langkah ini nggak susah kok. Ikuti tutorial yang akan aku berikan berikut :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
1. Pergi ke Blogger Dashboard > Templates > Edit HTML</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
2. Centang Expand Widget Template !</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
3. Kemudian cari kode berikut ini</div>
<blockquote class="tr_bq">
<p class='post-footer-line post-footer-line-1'></blockquote>
<div class="separator" style="clear: both;">
atau</div>
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-1'></blockquote>
<div class="separator" style="clear: both;">
atau</div>
<blockquote class="tr_bq">
<data:post.body/></blockquote>
<div class="separator" style="clear: both;">
Setelah ketemu kode di atas, kamu tambahkan kode script di bawah ini tepat di bawah kode tersebut !</div>
<blockquote class="tr_bq">
<div id='bpslidein_place_holder'></div></blockquote>
<div class="separator" style="clear: both;">
4. Nah, langkah terakhir adalah 'Save Template' </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Sekarang kamu bisa lihat hasilnya, kalau kamu membuka salah satu postingan di blog kamu dan kamu scroll sampai akhir postingan kamu akan mendapatkan kotak rekomended post di kiri bawah layar kamu. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Kalau kamu merasa artikel ini bermanfaat, luangkan waktu untuk berbagi kepada teman-teman kamu dengan share artikel ini. Kalau ada yang ditanyakan silahkan tinggalkan komentar di bawah.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Semoga bermanfaat </div>
<br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;"><br /></span></span></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Membuat Recomended Post Yang Muncul Di Akhir Postingan Blogger

Kali ini aku ingin berbagi cara untuk membuat rekomended post yang muncul di akhir artikel kamu. Recomended post ini sanget bermanfaat sekali karena dengan menambahkan widget blogger ini, kamu bisa menghindari bounce visitor yang ada di blog kamu. W…