Jumat, 19 April 2013

Cara Membuat Recent Post Berjalan di Blog

ecent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

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

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

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

4. Klik save dan lihat hasilnya.

Cara Memasang / Membuat Widget Recommended Post Slide Out di Blog

Recommended For You di Pojok/Sudut Kanan Bawah Blog.-  Dalam dunia blog selain pengunjung, ada juga satuh yang tak kalah penting, yaitu pageview. Pageview adalah jumlah halaman yang di kujungi atau di akses satu visitor ( pengunjung ) pada suatu blog dan pada waktu tersebut. Banyak cara untuk meningkatkanya, baik dengan memasang related post di blog, memasang daftar isi di sidebar, memasang recent post dan lain - lain.

Kali ni, saya akan kasih satu widget yang bisa meningkatkan pageview, namanya Recommended Post Slide Out atau tak jarang juga orang menyebutnya Widget Recommended For You. Widget ini menampilkan link artikel acak berupa judul dan gambar yang muncul secara tiba - tiba pada bagian pojok kanan bawah blog.

Fungsinya sebenarnya hampir sama dengan related post, bedanya, yang ini artikelnya di tampilkan secara random ( acak ) sedangkan related post menampilkan artikel se label. Sobat yang berminat memasang widget recommended post slide out di blog ini silahkan iktui tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript.
3. Masukkan kode berikut ke dalam kotak HTML/Javascript yang di sediakan.

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p><a href="http://christiantatelu.blogspot.com/2012/03/cara-memasang-widget-recommended-post.html" target="_blank">Recommended for you</a></p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://recommended-slide-out-for-blogger.googlecode.com/svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjluu0WPaVRdX-00Lk7XM2p_pn3dwT_kXAhCv9B0ZsgT42H-HWqlGlWQRw4JBRI8-_CK2T9IZxQXEBCFbcLrj6EkywRAizg04hI1NFMDPIrLvjVwUP_Df-74lwdQJyxh5HQhBcF9tcbwRY/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>


4. Klik save dan lihat hasilnya.

Tambahan :
Tak tahu karena sebab apa, sering kali widget ini sulit muncul terutama pada awal baru di pasang namun biasanya muncul pada 1 hingga 2 hari nya, karena itu bagi sobat yang memasang widget ini kemudian tidak langsung muncul, maka menunggu lah...

Selamat Ber-eksperimen.

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

Mengertikah sobat akan maksud dari judul di atas? Sobat mungkin sering menemukan artikel mirip seperti ini dengan kata kunci " Membuat daftar isi per label", atau tak jarang juga dengan keyword cara membuat daftai isi sitemap. tapi satu mungkin yang membedahkan trik ini dari cara membuat daftar isi yang lain, yaitu cara ini yang hanya menampilkan  artikel - artikel dalam 1 kategori atau label tertentu. Masih kurang mengerti juga?

Kali ini kita akan coba membuat daftar isi otomatis pada satu kategori tertentu. Untuk lebih jelasnya, coba sobat lihat daftar isi di sidebar paling atas di blog ini.


Trik seperti ini sebenarnya bisa sobat lakukan secara manual dengan cara memasukkan secara manual link - link artikel sobat , namun seperti biasa, waktu sobat mungkin akan sedikit terkuras. Untunglah jika sobat hanya memiliki sedikit artikel.. bagaimana jika banyak?? wah. bisa pegel ni jarinya.. hehe

Widget ini di lengkapi scroll yang berfungsi menghemat  halaman sobat, jadi jangan perlu takut kalau - kalau tidak muat lamannya karna kebanyakan artikel. Bagi sobat yang tertarik untuk membuat daftar isi otomatis pada label tertentu silahkan ikuti tutorial berikut.

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen laman --> Tambah Gadget -->HTML/Javascript
3. Masukkan kode berikut kedalam kotak yang di sediakan dan berikan judul sesuka hati sobat.

<div style="overflow:auto; width:auto; height:150px; padding:5px;border:0px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://christiantatelu.blogspot.com/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

tambahan :
  • width:auto :  menunjukkan bahwa  lebar scroll box akan menyesuaikan dengan lebar sidebar.
  • height:100px : tinggi scroll box. silahkan sobat ganti sesuai keinginan.
  • border:1px solid #e6e4e3 :  adalah ukuran, jenis dan warna dari border. 1px adalah tebal border, solid adalah jenis border ( jenis - jenis border lihat di sini!) dan #e6e4e3 adalah warna border.( kode warna lihat disini! )
  • font-size : adalah ukuran huruf.
  • <ol> : adalah Numbered LIst , sobat bisa menggantinya menjadi bullet list dengan kode <ul>
  • Ganti http://christiantatelu.blogspot.com dengan Url blog sobat.
  • Ganti SEO%20BLOG dengan label yang sobat inginkan. Perhatikan penulisan labelnya. sesuaikan dengan yang terterah, jika satu huruf saja salah penulisannya, makan daftar isinya tak akan muncul. %20 adalah Spasi jadi ganti spasi dengan kode %20.

3. Klik simpan.

Untuk menampilkan daftar isi lebih dari satu label, misalnya untuk label SEO BLOG dan BLOG, maka kode yang harus sobat pakai adalah seperti berikut.

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script>
<h3>BLOG</h3>
<ol>
<script src="http://christiantatelu.blogspot.com/feeds/posts/default/-/BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>SEO BLOG</h3>
<ol>
<script src="http://christiantatelu.blogspot.com/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

tambahan :
  • Sesuaikan tulisan yang berwarna biru dengan label yang sobat gunakan.

Nah.. Bagaimana sob.. gampang kan??  Sampai di sini dulu tutorialnya, tunggu lagi kelanjutan postingan dari Christian Tatelu.

Cara Memasang Artikel Acak di Blog

random post
Widget random post adalah widget yang manampilkan postingan atau artikel secara acak atau random untuk seluruh artikel di blog tanpa terkecuali. Berdasarkan penjelasan ini, berarti kita sudah dapat membedahkan antara related post, recent post ( baca : cara membuat recent post berjalan di blog ), popular post dengan random post.

Dengan memasang widget ini, postingan - postingan lawas yang kemungkina sudah lama tak di lihat pengunjung ( apalagi artikel yang tak memperoleh top 10 google ) akan di tampilkan kembali secara acak bersama postingan - postingan lawas dan postingan terkini lainnya.

Sobat yang tertarik memasang widget random post di blog silahkan ikuti tutorial berikut.

1. Klik Rancangan --> Elemen laman --> Tambah Gadget --> Pilih HTML/Javascript
2. Masukkan kode berikut ke dalam kotak yang di sediakan

<div style="overflow:auto; width:auto; height:250px; padding:5px;border:px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ol>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ol>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script><span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-memasang-artikel-acak-di-blog.html"> widget! </a></span></div>

catatan :
var numofpost=10 berarti jumlah postingan acak yang akan di tampilkan berjumlah 10, silahkan tambah atau kurangi angkahnya dengan memperhitungkan berat loading blog.

3. Klik save dan lihat hasilnya.

Singkat padat namun di harapkan bisa membantu...

sekian...

Cara Membuat Link Download di Blog

Dalam dunia blog selain artikel ada juga yang di sebut link, link sebagaimana kita ketahui adalah tautan yang menghubungkan antara halaman satu dengan halaman lain, situs dan situs lain termasuk link download yang tentuhnya mengarah ke situs file sharing tertentu. Contoh link adalah seperti berikut ( baca : blogspot template blog ).

Kali ini masih seputar link, saya akan share tentang cara bikin link download gratis di blogspot. Untuk membuat link download yang pertama harus kita miliki adalah file dan tentunya akun di file sharing ( seperti ziddu, googlecode, 4shared dll ). File yang ada di komputer sobat nantinya kan di upload ke salah satu file sharing tadi guna mendapatka url dari file tersebut. Kali ini kita akan membahas di file sharing ziddu saja.

1. Sign up di ziddu.com ( baca : cara membuat akun di ziddu )
2. Silahkan sobat meng-upload file ke ziddu untuk mendapatkan link downloadnya.
3. Link download dari ziddu kira - kira seperti gambar berikut.



Nah, setelah kita mendapatkan lin downloadnya, sekarang waktunya untuk membuat link downloadnya. setahu saya, ada 2 cara untuk membuat link download, yang pertama dengan mengunakan teks biasa dan kedua dengan menggunakan / menyisipkan gambar pada link download. Berikut penjelasannya.

1. Link Download Biasa
<a href="http://www.ziddu.com/download/19044499/tatelustyle.rar.html" target="_blank"><b>DOWNLOAD</b></a>

Hasilnya :

DOWNLOAD


2. Link Download Dengan Gambar
<a href="http://www.ziddu.com/download/19044499/tatelustyle.rar.html" target="_blank"><img alt="Download Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO985mXRsL1LHUSVz4hPDTO8F2IPi8DboEaRzK0SB5HD6Rjhce_ZNBDqyqOkE1wqwrWjPD5E-5OfMxKEAVLnHcCsyFlWQQ8EoWFyTOrJoVbEX2DJYHNC-McXcSfZ5sZCe78iuS2Wfqf-Fx/s1600/download-button.jpg" /></a>

Hasilnya :

Download Button


Tambahan:
Tulisan yang di cetak tebal dan berwarna merah adalah link download ( url file ) yang diambil dari file hasil upload di ziddu.

Cara Membuat Kotak Komentar Berada di Tengah

Cara Membuat Kotak Komentar Berada di Tengah - Apa kabar sobat blogger!!! sebelumnya saya ucapkan selamat Hari Raya Paskah bagi yang merayakan. Kali ini saya akan kasih sedikit tips seputar blog, bagaimana cara membuat kotak komentar agar berada ditengah. Seperti yang kita ketahui bahwa kotak komentar default blogger letaknya di sisi kiri, kali ini kita akan mencoba memindahkannya ke tengah.

1. Log in ke akun blog sobat
2  Klik rancangan --> edit HTML --> letakkan kode berikut di atas kode ]]></b:skin>


.comment-form{
margin-right: auto;
margin-left: auto;
}

3. Klik save dan lihat hasilnya.

Tambahan :
untuk sekedar memberi jarak antar tepi kiri dengan kotak komentar, sobat tinggal mengganti kode auto dengan angka yang di inginkan. Misalnya sobat ingin memberi jarak antara kotak komentar dengan tepi sisi kiri maka sobat bisa menggunakan kode berikut :

.comment-form{
margin-left:15px;
}

Sekian dan semoga membantu....

Cara Memasang TV di Blog

tv online
Cara Memasang Tv Online Streaming di Blog - Selalu ada yang baru di dunia blog, setelah bisa memasang animasi di blog, memasang lagu di blog, kini dengan kecanggihan teknologi sobat bisa memasang TV online di blog ( nonton sambil ngeblog ) entah itu RCTI, SCTV, TRANS TV, TRANS 7, GLOBAL TV, MNC TV, KOMPAS TV, INDOSIAR, ANTV, TV ONE, dan lain - lain. Tutorial yang seperti ini bisa dengan mudah sobat temukan di google dengan kata kunci "cara pasang tv ( televisi ) di blogspot". Berikut tutorial cara pasang TV di blog bagi sobat yang berminat.

A. Untuk memasang TV Online di sidebar blog, sobat ikuti tutorial berikut.

1. Log in ke akun blog sobat
2. Klik Rancangan --> Elemen laman --> Tambah gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam kotak yang di sediakan.
<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>

4. klik save

B. Untuk cara pemasangan di halaman postingan berikut tutorialnya .

1. Login ke akun blog sobat
2. Klik Entri baru kemudian beri judul sesuai keinginan. Misalnya Nonton TV Online
3. Masukkan kode berikut di Edit HTML di postingan dan jangan di Compose
<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>

4. Klik Terbitkan Entri dan lihat hasilnya..

Tambahan :
Atur ukuran width ( lebar ) dan Height ( tinggi ) TV online sesuai keinginan.

Menampilkan Judul Artikel Saja di Homepage

Menampilkan Judul Artikel / Posting Saja di Homepage - Apa kabar sobat blogger? pada kesempatan kali ini kita akan coba membahas tentang bagaimana cara membuat judul artikel saja yang tampil di halaman depan blog. Tutorial kali ini sebenarnya berfungsi hampir sama dengan readmore ( baca : cara memasang readmore di blog ) namun jika readmore menampilkan judul artikel berserta ringkasan artikel, maka yang ini hanya akan menampilkan judul artikel ( posting ) saja. Bagi sobat yang tertarik, silahkan ikuti tutorial berikut.

1. Login ke akun blogger sobat.
2. Klik rancangan --> edit HTML
3. Letakkan kode berikut di bawah kode ]]</b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

4. Simpan dan lihat hasilnya.

Tambahan :
Jika setelah menggunakan kode di atas dan masih menyisahkan elemen - elemn seperti tanggal posting, jumlah komentar dll, silahkan gunakan kode berikut menggantikan kode no 3.
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

Sekian....

Cara Memasang Game Online di Blog

Cara Pasang Game di Blogspot - Kadang kala ada saja faktor yang membuat kita malas ngeblog, ada yang karena bosen, karena nggak mood dan macem - macem deh... Sebenarnya rasa bosen tu terjadi di berbagai kegiatan bukan hanya ngeblog, kali ini saya akan kasih tutorial cara mensiasati kebosanan ngeblog.
Mengawali pagi yang indah ini, saya akan memulai postingan saya yang berjudul Cara Meletakkan Game Onlien di Blog yang nantinya bisa sobat maenkan langsung di blog sobat sendiri. Setelah sebelumnya berhasil memposting cara memasang TV di Blog, Cara Bikin Blog, dan lainnya, kali ini akan saya kasih tutorial lengkap cara pasang permainan di blogspot entah sobat pasang di sidebar ataupun di halaman posting. Sobat yang tertarik, silahkan ikuti tutorial berikut.

1. Silahkan menuju ke http://www.khemer.com, disitu sobat akan melihat tampilan seperti berikut.


2. Pilih game yang di inginkan, kemudian ambil embed kode nya.

Cara Pemasangan :
Cara pemasang di sini terbagi 2 yaitu di pasang di halamn postingan ( artikel ) dan di sidebar sebagai widget. Mari kita lihat tutorialnya.

A. Memasang Game Online di Postingan Blog
1. Log in ke akun blogger sobat
2. Buat entri baru dengan meng-klik tulisan Entri Baru
3. Masukkan Embed Code di Edit HTML di form penulisan artikel. Lihat Gambar


4. Setelah itu, klik tulisan Terbitkan Entri yang menadakan entri sobat sudah terposting.
B. Memasang Game Online di Sidebar Blog
1. Klik Rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript
2. Masukkan embed kode kedalam kotak yang di sediakan.
3. Klik Save / Simpan

Tambahan :
Embed Code yang sobat ambil, kira - kira seperti berikut.
<object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object>

Tambahkan kode <center></center> agar game online ditampilkan di tengah halaman. Hasilnya seperti berikut. 
<center><object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object></center>

Kamis, 18 April 2013

Nonton TV Online

    Warung Bebas TV Streaming

    Cara Membuat Menu Tab View Tanpa Edit HTML (3 tab)

    Cara Membuat Menu Tab View Tanpa Edit HTML - Apa kabar sobat blogger?? wah.. jarang - jarang nich christian tatelu posting 2 artikel sehari, mudah- mudahan bisa begitu terus.. heheh. Setelah sebelum telah memposting tentang cara mengetahui blog dofollow atau nofollow, kali ini saya aka kasih tahu pada sobat blogger bagaimana cara membuat memasang menu tab view tanpa harus edit html.



    Seperti kita tahu bersama bahwa Tab view adalah salah widget berguna terutama untuk menghemat halaman blog sobat. Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. contohnya bisa sobat lihat di bagian footer sebelah kiri dari blog ini.

    Cara ini ini sebenarnya sudah banyak yang posting tapi sembari menunggu hujan berhenti tak apa lah, siapa tahu makin banyak follower blog nya, iya toh???? hehehe. Sobat yang tertarik untuk memasang widget menu tabview tanpa edit HTML silahkan ikuti tutorialnya.

    Cara Membuat Menu Tab View Tanpa Edit HTML

    1. Log in ke akun blog sobat.
    2. Klik Rancangan -->Elemen laman --> Tambah Gadget --> pilih HTML/Javascript
    3. Masukkan kode berikut ke dalam konten dan jangan beri nama widgetnya.

    <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px; /*--Pull tab down 1px--*/
     overflow: hidden;
     position: relative;
     background: #e0e0e0;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #fff;
     border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: #fff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none;
    }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script>

    <!-- to make sure the widget works, do not alter the code below -->
    <div id='codeholder'><p>Get this <a href="http://christiantatelu.blogspot.com/2012/02/cara-membuat-menu-tab-view-tanpa-edit.html" target="_blank">widget</a></p></div>

    4. Klik save dan lihat hasilnya

    Cara Membuat Tab Menu di Blog (4 tab)

    Cara Membuat Tab Menu di Blog itu yang akan saya bahas sekarang, :y; Kalau ada kawan Blogger yang tidak tahu apa itu Tab Menu dan untuk apa [maaf saya bukannya menggurui kawan] dapat saya sampaikan kurang lebih adalah Kumpulan Elemen yang bisa menhemat tempat pada Blog 
    Sepengetahuan saya Tab Menu scriptnya bisa disimpan pada Template dan Widget, yang saat ini akan saya bahas penyimpanan scriptnya pada Template :z;
    Cara Membuatnya :
    • Masuk Account Blogger dengan ID kawan
    • Pada Dasbor pilih Template
    • Copas HTML berikut diatas ]]></b:skin>
    div.TabView div.Tabs {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */ 
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */ 
    padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */ 
    border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}
    div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}
    div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}
    div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ } 
    div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* Warna background Kotak Utama */ } 
    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden} 
    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px} 

    • Selanjutnya Copas Script berikut dibawah ]]></b:skin>

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

    • Simpan Template kawan 
    • Selanjutnya pilih Tata Letak - Tambah Gadget - HTML/JavaScript
    • Copas Script berikut kedalamnya
    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Judul Tab 1</a>
    <a>Judul Tab 2</a>
    <a>Judul Tab 3</a>
    <a>Judul Tab 4</a>
    </div>
    <div class="Pages" style="width: 300px; height: 250px;">
    <div class="Page">
    <div class="Pad">
    Isi tab 1 - SIMPAN FILE KAWAN DISINI </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi tab 2 - SIMPAN FILE KAWAN DISINI </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi tab 3 - SIMPAN FILE KAWAN DISINI </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi tab 4 - SIMPAN FILE KAWAN DISINI </div>
    </div>
    </div></div></form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

    • Simpan Blog kawan dan lihat hasilnya

    Sedikit penjelasan saya : 
    Lebar Tab adalah [width:73px;] sebanyak 4 tab ditambah border:8px [1+2+2+2+1], maka lebar keseluruhannya menjadi 300px;

    Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next


    widget artikel terbaru
    Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan NextWidget artikel terbaru ini sama saja sebenarnya dengan widget recent post dengan thumbnail. Fitur modifikasi yang ditambahkan pada widget ini adalah adanya tombol fungsi previous dan next dibagian bawah widget. Nah inilah yang menjadi keistimewaan widget artikel terbaru ala Creating Website ini. Dengan tambahan tombol previous dan next ini maka pengguna dapat mengetahui artikel terbaru apa saja yang ada di blog anda tanpa harus repot membuka daftar isi blog. Kebetulan saya memang juga suka dengan karya-karya Maskolis terutama template-template buatannya yang keren banget, maka pada tips blogging kali ini saya kepingin share tutorial cara membuat widget artikel terbaru ini.  
                                               
    Cara Membuat Artikel Terbaru dengan Fungsi Previous dan Next :
    1. Login ke dashboard blogger Anda
    2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
    3. Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
    4. Backup dulu template anda sebelum melakukan editing.
    5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

      #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
      #terbaru{margin:0px}
      .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
      .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
      .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
      .mas-elemen:hover{background-color:#c3c3c3}
      .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
      #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndP5H7pefefKvgKoTSZU623wLb5fFAB5RhHdo4BSY0_oJ1o3HtZI_yQQGf5x3U-WVFdkPHm2fkZa7zE409W7R5xufxLTeC8oqlTAX9ILeqETrwNTC41Lan5-LfdBda2Djf5oeAa1aDAw/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
      #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
      #mas-navigasifeed:hover{background-color:#c3c3c3}
      #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
      #mas-navigasifeed span{padding:5px 10px}
      #mas-navigasifeed .next{float:right}
      #mas-navigasifeed .previous{float:left}
      #mas-navigasifeed .home{text-align:center}
      #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
      Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
    6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

      <script type='text/javascript'>
      //<![CDATA[
      var numfeed = 5;
      var startfeed = 0;
      var urlblog = "http://infoheadline.blogspot.com/";
      var charac = 100;
      var urlprevious, urlnext;

      function maskolisfeed(johny,banget){
      var showfeed = johny.split("<");
      for(var i=0;i<showfeed.length;i++){
      if(showfeed[i].indexOf(">")!=-1){
      showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
      }
      }
      showfeed =  showfeed.join("");
      showfeed = showfeed.substring(0,banget-1);
      return showfeed;
      }
      function showterbaru(json) {
      var entry, posttitle, posturl, postimg, postcontent;
      var showblogfeed = "";
      urlprevious = "";
      urlnext = "";
      for (var k = 0; k < json.feed.link.length; k++) {
      if (json.feed.link[k].rel == 'previous') {
      urlprevious = json.feed.link[k].href;
      }
      if (json.feed.link[k].rel == 'next') {
      urlnext = json.feed.link[k].href;
      }
      }
      for (var i = 0; i < numfeed; i++) {
      if (i == json.feed.entry.length) { break; }
      entry = json.feed.entry[i];
      posttitle = entry.title.$t;
      for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
      posturl = entry.link[k].href;
      break;
      }
      }
      if ("content" in entry) {
      postcontent = entry.content.$t;
      } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
      } else {
      postcontent = "";
      }
      if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
      } else {
      postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNsXOzhHM0b_RwmJq39tfu4KtfL0JKyaJvDcWTF3an2PP9R2x4eNH44S_i02H_hW0BrM26MOHyAkdltCs661XrfwprtPwzmNUW3snAPSww1xvlVzGiKg7PBihZCfg4IX4jBD8TV3xhADo/s1600/no+image.jpg";
      }
      showblogfeed += "<div class='mas-elemen'>";
      showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
      showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
      showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
      showblogfeed += "</div>";
      }
      document.getElementById("terbaru").innerHTML = showblogfeed;
      showblogfeed = "";
      if(urlprevious) {
      showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
      } else {
      showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
      }
      if(urlnext) {
      showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
      } else {
      showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
      }
      showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
      document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
      }

      function navigasifeed(url){
      var p, parameter;
      if(url==-1) {
      p = urlprevious.indexOf("?");
      parameter = urlprevious.substring(p);
      } else if (url==1) {
      p = urlnext.indexOf("?");
      parameter = urlnext.substring(p);
      } else {
      parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
      }
      parameter += "&callback=showterbaru";
      incluirscript(parameter);
      }
      function incluirscript(parameter) {
      if(startfeed==1) {removerscript();}
      document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
      document.getElementById("mas-navigasifeed").innerHTML = "";
      var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
      var terbaru = document.createElement('script');
      terbaru.setAttribute('type', 'text/javascript');
      terbaru.setAttribute('src', archievefeed);
      terbaru.setAttribute('id', 'MASLABEL');
      document.getElementsByTagName('head')[0].appendChild(terbaru);
      startfeed = 1;
      }
      function removerscript() {
      var elemen = document.getElementById("MASLABEL");
      var parent = elemen.parentNode;
      parent.removeChild(elemen);
      }
      onload=function() { navigasifeed(0); }
      //]]>
      </script>
      Keterangan :
      var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
      var urlblog = "http://infoheadline.blogspot.com/"; >> ganti dengan URL blog Anda
      var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
    7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

      <div id="terbaru"></div>
      <div id="mas-navigasifeed"></div>
      Terakhir save dan lihat hasilnya.
    Demikian Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next ini, kalau anda suka tinggal sedot aja kodenya dan pasang disidebar blog anda. Happy blogging..!!       

    Tips Membuat Widget Carousel Related Post Scrolling

    www.rayhanzhampiet.com
    Membuat Widget Scrolling Related Post Di Blogspot  – Widget related post atau artikel terkait yang mau saya share kali ini sedikit berbeda dengan widget related post statis (diam) yang sering kita lihat seperti yang ada di blog Share With Irfan ini. Kali ini kita akan belajar membuat widget related post dengan fitur Carousel (Carousel Related Post). Keunikan widget related post ini ada pada scrolling dengan efek marquee dari thumbnail dan judul artikel sesuai label terkait dari posting yang ada. Dan apabila mouse kita sorotkan pada thumbnail atau judul (mouseover), maka secara otomatis akan memunculkan tulisan dari judul artikel. Jadi kalau kita melihat related post ini seperti layaknya kita melihat sebuah tayangan slide. Kalau di platform Wordpress mungkin lebih gampang lagi karena sudah tersedia wordpress related post slider plugin. Sementara untuk blogspot kita masih harus membuatnya secara manual.
    www.rayhanzhampiet.com
    Screenshot Carousel Related Post
      
    Cara Membuat Carousel Related Post Di Blogspot
    1.       Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.
    2.       Cari kode </head>  pada template anda.
    3.       Letakkan kode CSS/JS dibawah ini diatas kode </head>.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
    #related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
    #related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
    #related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
    .tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
    .tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNnUWnXRTFi0ZPUhyphenhyphenbI9gX2IyUtO679RqmX3gh9h87omrYv7MkBg0PlZpe0PMDDJetvvuaR9yG0o6_dmz0B5xLssKQ3uFk6liw2swlU2tjsXrUKQ7JVnpHkVMliKyAnrw4qT3Ig5gJzg/s1600/bt.png) no-repeat top;}
    .tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNnUWnXRTFi0ZPUhyphenhyphenbI9gX2IyUtO679RqmX3gh9h87omrYv7MkBg0PlZpe0PMDDJetvvuaR9yG0o6_dmz0B5xLssKQ3uFk6liw2swlU2tjsXrUKQ7JVnpHkVMliKyAnrw4qT3Ig5gJzg/s1600/bt.png) no-repeat bottom;}
    </style>
    <script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3ulMEZwNHvc9qsqdBsm-HlRECLy836Wpu6hIc7J_IAgIAsyWBBxxrUQcJKaSsCVj7b_dmu8cGbDw_DHd5hSOR88HxWHsBamd2VZqB9kDHV3KV4Ph1l80Fm5CxYtEgj2EeXPKWw8k2BY/s1600/noimage.jpg';</script>
    <script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
    </b:if>
    4.  Kemudian cari kode <div class='post-footer-line post-footer-line-1'> pada template anda. Letakkan kode HTML dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'>. Jika template anda kodenya ada 2, maka letakkan kode HTML dibawah kode <div class='post-footer-line post-footer-line-1'>  yang pertama.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
    <h3>Related Posts</h3>
    <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=10;
    var relatedpoststitle=&quot;&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script></marquee>
    </div><div style='clear:both'/>
    </b:if>
    5.       Preview dulu untuk melihat tampilan hasilnya.
    6.      Jumlah maksimum posting yang ditayangkan adalah 20. Silahkan ganti angka 10 yang saya tandai merah jika anda ingin merubahnya.
    7.       Save/Simpan template anda.

    Cara Membuat Sliding Hover Button

    Button atau tombol yang bisa di klik mempunyai banyak kegunaan. Efek sliding (geser) yang ada pada button ini mirip dengan menu Rocking Rolling Rounded dengan jquery yang dulu pernah saya posting. Sobat dapat menggunakan button ini untuk tombol download, subscribe by email atau lainnya, terserah keperluan masing-masing.
    hover button
    1. Login ke dashboard blogger Anda
    2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
    3. Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
    4. Backup dulu template anda sebelum melakukan editing.
    5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

      .a-btn{
      background:#80a9da;
      background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
      background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
      background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
      background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
      background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
      filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
      padding-left:20px;
      padding-right:80px;
      height:38px;
      display:inline-block;
      position:relative;
      border:1px solid #5d81ab;
      -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
      -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
      box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      border-radius:20px;
      float:left;
      clear:both;
      margin:10px 0px;
      overflow:hidden;
      -webkit-transition:all 0.3s linear;
      -moz-transition:all 0.3s linear;
      -o-transition:all 0.3s linear;
      transition:all 0.3s linear;
      }
      .a-btn-text{
      padding-top:8px;
      display:block;
      font-size:18px;
      white-space:nowrap;
      text-shadow:0px 1px 1px rgba(255,255,255,0.3);
      color:#446388;
      -webkit-transition:all 0.2s linear;
      -moz-transition:all 0.2s linear;
      -o-transition:all 0.2s linear;
      transition:all 0.2s linear;
      }
      .a-btn-slide-text{
      position:absolute;
      height:100%;
      top:0px;
      right:52px;
      width:0px;
      background:#63707e;
      text-shadow:0px -1px 1px #363f49;
      color:#fff;
      font-size:18px;
      white-space:nowrap;
      text-transform:uppercase;
      text-align:left;
      text-indent:10px;
      overflow:hidden;
      line-height:38px;
      -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
      -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
      box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
      -webkit-transition:width 0.3s linear;
      -moz-transition:width 0.3s linear;
      -o-transition:width 0.3s linear;
      transition:width 0.3s linear;
      }
      .a-btn-icon-right{
      position:absolute;
      right:0px;
      top:0px;
      height:100%;
      width:52px;
      border-left:1px solid #5d81ab;
      -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
      -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
      box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
      }
      .a-btn-icon-right span{
      width:38px;
      height:38px;
      opacity:0.7;
      position:absolute;
      left:50%;
      top:50%;
      margin:-20px 0px 0px -20px;
      background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSq9WkU8iGG6ncY7jgc0HLXxSpiWAxJfv78yFgfvdvt9f-3tTIQ8UFbkIIVRT3bL-i6iv96yc3G83hjVweHB0Azn_FQcuQjKXQUYK1ki1drGuJNFSJjsXI15zEbWJvNHDw8yoBgkeuyI/s1600/arrow_right.png) no-repeat 50% 55%;
      -webkit-transition:all 0.3s linear;
      -moz-transition:all 0.3s linear;
      -o-transition:all 0.3s linear;
      transition:all 0.3s linear;
      }
      .a-btn:hover{
      padding-right:180px;
      -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
      -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
      box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
      }
      .a-btn:hover .a-btn-text{
      text-shadow:0px 1px 1px #5d81ab;
      color:#fff;
      }
      .a-btn:hover .a-btn-slide-text{
      width:100px;
      }
      .a-btn:hover .a-btn-icon-right span{
      opacity:1;
      }
      .a-btn:active{
      position:relative;
      top:1px;
      background:#5d81ab;
      -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
      -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
      box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
      border-color:#80a9da;
      }
    6. Kemudian pilih menu Layout, klik Add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya (pilih salah satu saja) :

      <div class="button-wrapper">
      <a href="Button URL" class="a-btn">
      <span class="a-btn-text">Register now</span>
      <span class="a-btn-slide-text">It's free!</span>
      <span class="a-btn-icon-right"><span></span></span>
      </a>
      <a href="Button URL" class="a-btn">
      <span class="a-btn-text">Become a member</span>
      <span class="a-btn-slide-text">Sign up!</span>
      <span class="a-btn-icon-right"><span></span></span>
      </a>
      <a href="Button URL" class="a-btn">
      <span class="a-btn-text">Enter</span>
      <span class="a-btn-slide-text">Log in!</span>
      <span class="a-btn-icon-right"><span></span></span>
      </a>
      <a href="Button URL" class="a-btn">
      <span class="a-btn-text">Get an account</span>
      <span class="a-btn-slide-text">For free!</span>
      <span class="a-btn-icon-right"><span></span></span>
      </a>
      </div>
      Keterangan :

      Ganti tulisan "Button URL"; >> dengan link URL yang Anda tuju.
    7. Setelah itu save templates anda, jika ingin meletakkan button di dalam postingan sobat dapat langsung mengcopy kode button dan meletakkannya didalam area posting tanpa perlu di parse :

      <div class="button-wrapper">
            <a href="Button URL" class="a-btn">
            <span class="a-btn-text">Register now</span>
            <span class="a-btn-slide-text">It's free!</span>
            <span class="a-btn-icon-right"><span></span></span>
            </a>    
      </div>
      Terakhir save dan lihat hasilnya.

    Rabu, 17 April 2013

    insert file gambar dan simpan ke tabel

    Macro excel kali ini adalah contoh cara menambahkan gambar ke file excel dan merubah background shape
    dengan file gambar, serta menambahkannya kedalam sebuah tabel database. Berikut tampilan akhir dari
    macro excel ini :


    Gb. Tabel gambar emo

    Cara menjalankan macro input gambar emo ini adalah sbb :
    Pertama buka file MacroPicture.xls, dan pilih sheet formInput, akan muncul tampilan seperti di bawah :

    Gb. Tampilan sheet formInput





    Kemudian isikan Nama Emo, Jenkel dan Keterangan, untuk contoh bisa melihat gambar dibawah :

    Gb. Pengisian data kelengkapan data emo
    Untuk pengisian File Pic (file gambar emotion) caranya dengan mengklik tombol LoadPic, yang nantinya 
    akan muncul jendela open file gambar seperti berikut :
    Gb. Jendela open file gambar


    Setelah ketemu file gambar yang sesuai , klik gambar dan klik Open, maka tampilan shape yang sebelumnya kosong dan berwarna hijau sekarang berubah menjadi gambar emo yang kita pilih, bisa dilihat pada gambar 
    di bawah : (contoh file emo sudah ada di file lampiran folder picture)

    Gb. Tampilan shape setelah klik tombol LoadPic

    Jika langkah di atas sudah dilakukan, terakhir klik tombol SaveEmo, lihat hasilnya pada sheet tabelEmo.
    Sementara ini dulu artikel contoh macro yang berhubungan dengan file gambar, selanjutnya akan diposting
    contoh macro database file gambar yang lebih komplex (bisa pencarian, edit dan hapus database).

    File contoh macro ini bisa didonlot di >>
    MacroPicture (mediafire) 
    atau
    MacroPicture (ziddu)

    Postingan Lebih Baru Postingan Lama Beranda