JASA PEMBUATAN WEBSITE: Blogger

Membuat Tab View Di Blog

Membuat Tab View Di Blog

Pagi ini saya akan share cara Membuat Tab View Di Blog seperti yang Anda lihat pada gambar di atas atau pada Tab View blog saya di samping kanan. Sebenarnya saya dapat kode scriptnya dari Maskolis (pembuat template blog ini), namun karena ada temen yang request scriptnya, sekalian saja saya buat postingannya.

Cara Membuat Tab View Di Blog sedikit gampang karena kita tidak usah mengobok-obok kode HTML blog kita, cukup menambahkan kode scriptnya di gadget HTML sidebar blok kita. Bagi yang ingin mencobanya, silahkan copy kode script Tab View di bawah ini, kemudian paste di gadget HTML sidebar blog Anda.

</script>

Keterangan:

Perhatikan tulisan yang berwarna hijau, itu keterangan untuk tiap kode di sampingnya, silahkan rubah kode-kodenya dan sesuaikan dengan theme blog Anda.

Tulisan 300px merupakan lebar widget tab view ini, sesuaikan dengan lebar sidebar blog Anda.

Tulisan 350px merupakan tinggi untuk widget tab view, silahkan sesuaikan dengan keinginan Anda.

Tulisan berwarna ungu muda adalah kode script untuk recent post berdasarkan katagori/label dengan 1 buah thumbnail untuk postingan terakhir. Tulisan Software untuk label postingan Anda yang ingin ditampilkan. kompiajaib.blogspot.com silahkan ganti dengan blog Anda. 30 merupakan banyaknya recent post yang ditampilkan, dan http://kompiajaib.blogspot.com/search/label/Software silahkan ganti dengan URL label yang Anda tampilkan.

Kode HTML Anda Di Sini silahkan ganti dengan kode script widget yang lain seperti recent comment atau yang lainnya. Atau Anda bisa isi semua tab dengan kode script recent post yang warna ungu muda di atas, tinggal ganti nama labelnya saja. Seperti pada tab view di blog saya ini.

Jika Anda ingin membuat dua buah tab view seperti pada blog saya ini, hapus kode <script src="http://kompiajaib.googlecode.com/files/tab_view2.js"> </script> pada tab view kedua. Kemudian tambahkan angka 2 pada setiap tulisan TabView sehingga menjadi TabView2. Begitu juga kalau Anda ingin membuat tiga buah tab view di sidebar blog Anda.

Demikian sharing cara Membuat Tab View Di Blog kali ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu yang baru, setiap orang pasti melakukan try and error.

Membuat Permalink Otomatis Di Blog

Membuat Permalink Otomatis Di Blog

Kali ini saya akan mencoba sharing cara Membuat Permalink Otomatis Di Blog. Namun sebelumnya saya akan membahas sedikit tentang Permalink itu sendiri. Bagi kita sebagai blogger pemula tentunya asing dengan yang namanya Permalink. Menurut para ahli, Permalink adalah singkatan dari Permanent Link yang artinya adalah alamat permanen url atau link yang menuju ke blog atau web tertentu yang langsung menuju ke postingan blog/web itu sendiri.

Nah dengan Membuat Permalink Otomatis Di Blog, diharapkan dapat menambah internal link postingan atau artikel blog kita sehingga lebih SEO lagi dan dapat bersaing dan bertahan di search engine dan tentunya juga diharapkan dapat meningkatkan optimasi onpage blog kita. Biasanya permalink otomatis di simpan di bawah postingan. Anda mungkin pernah melihat seperti gambar di bawah ini:

Membuat Permalink Otomatis Di Blog

Gambar di atas adalah contoh untuk permalink otomatis yang ada di setiap postingan blog. Nah bagi yang ingin Membuat Permalink Otomatis Di Blog silahkan simak uraian cara membuatnya di bawah ini.

Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula.

Kemudian cari kode ]]></b:skin> agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode ]]></b:skin> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode ]]></b:skin> tadi.

.buatpermalinkblogger {border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666; padding: 5px; background: #444;-moz-border-radius:5px;}
.buatpermalinkblogger a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

Perhatikan tulisan berwarna merah #444 itu menunjukkan warna untuk kotaknya. Silahkan sesuaikan dengan warna blog Anda.

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Kemudian copy kode di bawah ini dan pastekan SETELAH kode di atas tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='buatpermalinkblogger'><center><small>Anda sedang membaca artikel tentang <strong><i><data:blog.pageName/></i></strong> dan bila berkenan Anda bisa share artikel <strong><i><data:blog.pageName/></i></strong> ini dengan tombol share di bawah. Bila Anda bermaksud COPAS artikel <strong><i><data:blog.pageName/></i></strong> untuk diposting di blog Anda, mohon untuk meletakkan link <strong><i><a expr:href='data:post.url'><data:blog.pageName/></a></i></strong>
sebagai Sumbernya dengan mengcopy kode di bawah ini.</small></center>
<div>
<form name="kompi ajaib">
<p align="center" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 98%; height: 10" name="txt" rows="1" cols="45" onmouseover="this.form.txt.select()" readonly ;><small><a href='<data:post.url/>'target='_blank'><strong><i>Sumber</i></strong></a></small></textarea></p>
</div>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-permalink-otomatis-di-blog.html' target='_blank'>widget</a></div>
</div></b:if>

Silahkan lakukan preview untuk memastikan penerapan kodenya sudah betul atau belum, kemudian save template blog Anda.

Demikian postingan Membuat Permalink Otomatis Di Blog, mudah-mudahan bermanfaat.

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Pagi ini saya share salah satu trik untuk mempercantik tampilan blog kita yaitu Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan. Setelah saya berhasil mengaplikasikannya pada blog saya ini, akhirnya saya berkesempatan untuk mengsharingnya untuk Anda semua. Tentunya bagi Anda yang belum tahu, bagi yang sudah tahu dan paham mohon koreksinya bila menjumpai hal yang kurang pas. Maklum saja saya belajar otodidak. Saya hanya senang dengan hal-hal yang baru, try and error sudah menjadi kebiasaan akhirnya. Dengan mencoba sesuatu hal yang baru, kita mendapat ilmu yang baru juga. Related posts ini akan bergerak ke kiri dan ke kanan dan akan berhenti ketika mouse di arahkan ke atasnya.

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula.

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=12;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444 untuk warna background kotaknya.

Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.

Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

Demikian sharing Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti mengalami try and error.

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Pagi ini saya akan share trik mempercantik blog yaitu Memberi Efek Marquee Pada Popular Posts Widget Blogger. Seperti telah kita ketahui, blogger menyediakan fasilitas popular posts. Kita bisa memunculkan popular posts dengan menyertakan thumbnail maupun tanpa thumbnail pada blog kita. Tentunya popular posts ini berdasarkan konten yang paling banyak diklik pengunjung blog.

Memberi Efek Marquee Pada Popular Posts Widget Blogger sangatlah mudah, namun tentunya Anda harus mengaktifkan dulu widget popular posts pada blog Anda. Dashboard >> Layout >> Add a Gadget >> Kemudian pilih Popular Posts.

Kemudian masuk ke Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates karena kita akan sedikit mengobok-obok kode HTML. Namun alangkah baiknya back up dulu template Anda untuk berjaga-jaga kemungkinan kesalahan pada edit HTML. Setelah itu silahkan cari HTML widget popular posts. Untuk memudahkan kita cari title dari widget tersebut dengan CTRL + F pada keyboard kemudian masukan titlenya ke kotak pencarian. Secara default, Anda akan menemukan kode HTML yang cukup panjang seperti di bawah ini.

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

Kemudian kita akan menambahkan kode <marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> di atas kode <div class='widget-content popular-posts'> dan menambahkan kode </marquee> di bawah kode </div>

Perhatikan pada height='350px', itu menuntukan tinggi widget yang akan tampil pada blog kita, silahkan Anda atur sesuai keinginan dan scrollamount='2' untuk mengatur kecepatan scroll-nya.

Sehingga penampakan kodenya akan menjadi seperti di bawah ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
...........................
...........................

Setelah itu silahkan lakukan preview untuk melihat apakah perubahannya sudah betul atau tidak, kemudian simpan template Anda, selesai.

Untuk demo, silahkan lihat pada Popular Posts Widget blog ini. Demikian sharing Memberi Efek Marquee Pada Popular Posts Widget Blogger kali ini mudah-mudahan bermanfaat.

Membuat Egg Share Slide Open Widget Di Pojok Blog

Membuat Egg Share Slide Open Widget Di Pojok Blog

Kali ini saya akan share sebuah sharing widget yang menurut saya cukup unik untuk disimpan di blog kita. Selain bentuknya yang unik karena berbentuk egg atau telur, egg share ini juga akan terbelah dan belahannya akan bergeser ke kanan ketika disorot mouse.

Cara Membuat Egg Share Slide Open Widget Di Pojok Blog cukup mudah, seperti biasa silahkan Anda masuk ke blog Anda >> Dashboard >> Template >> Edit HTML. Jangan lupa centang expand widget template karena kita akan mengobok-obok kode HTML.

Silahkan cari kode </head> (gunakan CTRL + F pada keyboard untuk memudahkan pencarian), lalu copy kode di bawah ini dan paste tepat DI ATAS kode tadi.

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Kemudian cari kode </body>, dan kemudian copy kode di bawah ini dan paste DI ATAS kode tadi.

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script><noscript><a href="http://kompiajaib.blogspot.com/">Blogger Gadgets</a></noscript>

Perhatikan tulisan berwarna merah, itu menunjukan posisi widget berada di pojok kiri bawah. Kalau widget ingin berada di pojok kanan bawah, ganti left dengan right. Agar Widget berada di pojok atas, ganti bottom dengan up.

Terakhir silahkan preview untuk melihat penempatan widgetnya sudah benar atau belum, kemudian save template Anda.

Demikian sharing cara Membuat Egg Share Slide Open Widget Di Pojok Blog mudah-mudahan bermanfaat.

Membuat Widget Jam Dan Kalender Di Pinggir Blog

Membuat Widget Jam Dan Kalender Di Pinggir Blog

Kenapa saya memberi judul Membuat Widget Jam Dan Kalender Di Pinggir Blog, karena memang tempat jam dan kalendernya berada di pinggir blog sebelah kiri dan tersembunyi sehingga tidak memakan tempat. Untuk melihat jam atau kalendernya kita tinggal klik pada tanda panah warna kuning dan kemudian jam atau kalendernya akan keluar.

Untuk melihat demo Membuat Widget Jam Dan Kalender Di Pinggir Blog silahkan lihat dengan klik di tombol demo di bawah ini, kemudian lihat di sebelah kiri blog.

Untuk mengaplikasikannya ke blog Anda cukup mudah, tinggal tekan tombol Add To Blogger di bawah ini, kemudian setelah terbuka jendela baru tinggal tekan tombol Add Widget.

Untuk waktu dan kalendernya sudah otomatis menyesuaikan dengan waktu internet. Bagaimana mau mencoba Membuat Widget Jam Dan Kalender Di Pinggir Blog? Silahkan...mudah-mudahan bermanfaat.

Membuat Widget I Love Indonesia Di Pojok Blog

Membuat Widget I Love Indonesia Di Pojok Blog

Pagi ini saya share cara Membuat Widget I Love Indonesia Di Pojok Blog yang cukup sederhana namum besar maknanya. Kita sebagai bangsa Indonesia tentunya bangga menjadi orang Indonesia, dan tentunya bangga juga menjadi blogger Indonesia. Widget ini bisa dipasang di blog Anda yang menandakan bahwa Anda orang dan blogger Indonesia.

Untuk demo silahkan klik tombol demo di bawah ini, kemudian lihat di pojok kanan atas blog.

Cara Membuat Widget I Love Indonesia Di Pojok Blog cukup mudah, Anda tinggal klik tombol add to blogger di bawah ini.

Setelah terbuka jendela baru, silahkan klik pada tombol Add Widget, selesai. Mudah kan...? Demikian sharing cara Membuat Widget I Love Indonesia Di Pojok Blog mudah-mudahan bermanfaat.

Add To Blogger Button Generator

Add To Blogger Button Generator

Bagi Anda yang sedang belajar membuat blog seperti saya khususnya yang senang dengan tutorial blog seperti membuat widget untuk diaplikasikan ke blog atau membuat widget yang dapat dipakai oleh orang lain tentunya akan memudahkan jika kita mempunyai tool Add To Blogger Button Generator.

Dengan adanya Add To Blogger Button Generator, orang lain dapat dengan mudah mengaplikasikan widget yang kita buat ke blognya dengan hanya menekan Add To Blogger Button, tanpa harus mengcopy kode script dan mempastenya di gadget HTML/JavaScript. Dengan Add To Blogger Button Generator dapat menghasilkan Add To Blogger Button yang akan otomatis menambahkan gadget HTML/JavaScript yang sudah berisi kode script dari widget yang kita buat.

Penampakan dari Add To Blogger Button yang dihasilkan dari Add To Blogger Button Generator seperti di bawah ini.

Di bawah ini contoh dari Add To Blogger Button Generator yang bisa Anda coba. Tool ini sebenarnya untuk memudahkan saya dalam belajar membuat widget blog. Cara menggunakannya cukup mudah, yang terpenting masukan kode script widget yang kita buat ke kotak Paste kode script widget (html/javascript), kemudian tekan tombol Generate dan hasilnya pada kotak paling bawah silahkan copy ke postingan HTML Anda.

Add To Blogger Button Generator

Settings

Masukan Judul Widget
Blog Url / Profile URL
Masukan URL Logo Blog
Paste kode script widget (html/javascript)

Demikian postingan kali ini tentang Add To Blogger Button Generator, mudah-mudahan bermanfaat.

Sumber

Membuat Share Button Melayang Di Pinggir Blog

Membuat Share Button Melayang Di Pinggir Blog

Salah satu sarana untuk mempublikasikan postingan blog kita ke berbagai sosial media yaitu dengan membuat share button atau dalam bahasa Indonesianya yaitu tombol berbagi. Nah untuk itu kini saya share cara Membuat Share Button Melayang Di Pinggir Blog yang sederhana namun besar manfaatnya. Share button ini akan tetap tampil di depan halaman meskipun halaman di roll ke atas atau ke bawah.

Cara Membuat Share Button Melayang Di Pinggir Blog cukup mudah, silahkan Anda masuk ke blog Anda. Dashboard >> Layout >> Add a gadget >> pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalam gadget tersebut. Jangan dikasih title untuk gadget ini, biarkan kosong.

<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="background:#FFFFFF; border: 0px solid #000000; top:120px;left:80px;"><div class="addthis_toolbox addthis_default_style"><span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span><span><a class="addthis_button_tweet" tw:count="vertical"></a></span><span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span><span><a class="addthis_counter"></a></span><span><div style='border: 0px; padding: 0px; background-color: none; text-align: center; font-size:9px;'> <a href='http://kompiajaib.blogspot.com/2012/05/membuat-share-button-melayang-di.html' target='_blank'>Get Widget</a></div></span></div></div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Mudah kan...? Demikianlah cara Membuat Share Button Melayang Di Pinggir Blog mudah-mudahan bermanfaat.

Membuat FB Like Box Melayang Slide Close

Membuat FB Like Box Melayang Slide Close

Pagi ini saya akan mencoba sharing sebuah widget facebook like box yang melayang dengan tombol close dengan efek slide ketika di tekan. Saya mencoba menggabungkan kode-kode script yang saya dapat dari bloger-bloger lain selama belajar blogging yang saya tekuni selama ini dan hasilnya menurut saya lumayan untuk diterapkan di blog. Bagi para master, tolong kasih masukan tentang widget ini kalau ada kesalahan. Widget ini lumayan simpel karena tidak perlu mengobok-obok HTML template blog Anda.

Bagi yang ingin mencoba menggunakannya di blog, silahkan ikuti caranya di bawah ini.

1. Seperti biasa silahkan login ke blog Anda.

2. Dashboard >> Layout >> add a gadget >> pilih HTML/JavaScript,kemudian copy kode di bawah ini.

<div style="display:scroll;position:fixed;top:50px;left:400px;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://kompiajaib.googlecode.com/files/slidefbnew.js" type="text/javascript">
</script>
<style>
#kompiajaib_slidefb2012{
font-family: "Consolas", "Courier New", Courier, mono, serif;
border: 1px solid;
width: 355px;
margin: 10px 0px;
padding:5px 0px 0px 5px;
background-repeat: no-repeat;
position:relative;
color: #00529B;
background-color: #000000;
}
</style>
<div id="kompiajaib_slidefb2012">
<a class="close" href="#close" style='position:absolute;right:0px;top:0px;margin-right:-1px;margin-top:-1px;'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaFDwCP0JEGzCAlQ5YUAuA740-xmS-8VXu9VkVHlt1mgQ_hJFw9QVKTV3Kdt55JDYqc4qPZbvhDx0_yG2kJpaXzurCqU4p2sw0u2MrpRSpCQn89AVk-hDmqdQnHfwZht5Kl5g5bokVjHF/s1600/popover-close-button.gif" /></a>
<div style='width:99%;padding:8px 0px;background-color:#737373;font-family:arial;text-align:center;'><div style='color:#FFF;font-size:13px;font-weight:bold;'>Like us and get updates</div></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Kompi-Ajaib/395526477133955&width=350&height=255&colorscheme=dark&show_faces=true&border_color=%23FFFFFF&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:255px;" allowtransparency="false"></iframe><div style="border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;">Powered by <a href="http://kompiajaib.blogspot.com/2012/05/membuat-fb-like-box-melayang-slide.html" target="_blank">blogger widget</a></div>
</div></div>

Warna background widgetnya hitam atau dark.

#000000 adalah background widget, silahkan sesuaikan dengan template Anda. Untuk mengetahui kode warna silahkan masuk

http://www.facebook.com/pages/Kompi-Ajaib/395526477133955 silahkan ganti dengan URL facebook Anda.

Jika background widgetnya terang, silahkan ganti dark dengan light.

Demikin sharing Membuat FB Like Box Melayang Slide Close kali ini mudah-mudahan bermanfaat.

Cara Membuat Link Dengan Tombol Sederhana Di Blog

Pada kesemptan ini saya akan share Cara Membuat Link Dengan Tombol Sederhana Di Blog. Biasanya tombol ini digunakan untuk tombol download atau tombol apa saja untuk menggantikan link teks sehingga berkesan lebih rapih. Bagi yang belum mengetahui Cara Membuat Link Dengan Tombol Sederhana Di Blog simak tutorial sederhana saya di bawah ini.

Cara Membuat Link Dengan Tombol Sederhana Di Blog cukup mudah, Anda tinggal mengcopy kode di bawah ini.

<a href="LINK ANDA DI SINI" target="_blank"><button>Download</button></a>

dan penampakannya akan seperti di bawah ini.

Silahkan ganti tulisan LINK ANDA DI SINI dengan link yang ingin Anda masukan ke tombol tersebut, dan ganti tulisan Download dengan tulisan yang ingin Anda tampilkan pada tombol tersebut.

Mudah kan...? Demikian postingan sederhana tentang Cara Membuat Link Dengan Tombol Sederhana Di Blog, mudah-mudahan bermanfaat.

Cara Membuat Efek Marquee Di Blog

Pagi ini saya share salah satu trik blogger cara membuat efek marquee di blog atau lebih umumnya kita kenal efek tulisan berjalan. Sebenarnya cara membuat efek marquee di blog sudah banyak di share oleh blogger-blogger lain namun untuk melengkapi trik blogger di blog ini, kini saya kembali meng-share-nya bagi Anda yang belum paham atau belum tahu kode script untuk membuat efek marquee di blog.

Dengan membuat tulisan atau apapun dengan efek marquee, membuat blog tersebut terkesan lebih hidup. Cara membuat efek marquee di blog cukup mudah. Kita bisa mengaplikasikannya di widget atau di psotingan blog kita. Ada beberapa cara membuat efek marquee di blog, diantaranya:

1. Efek marquee yang berjalan dari kiri ke kanan.

Kode scriptnya seperti di bawah ini:

<marquee align="center" direction="right" scrollamount="2" width="100%" height="20">
Tulisan Anda di sini
</marquee>

Penampakannya akan seperti di bawah ini:

Contoh untuk efek marquee yang berjalan dari kiri ke kanan.

Untuk tulisan agar berjalan dari kanan ke kiri, tinggal ganti right menjadi left.

2. Efek marquee yang berjalan ke kanan dan ke kiri.
Kode scriptnya seperti di bawah ini:

<marquee align="center" direction="left" scrollamount="3" behavior="alternate" width="100%" height="20">
Tulisan Anda di sini
</marquee>

Penampakannya akan seperti di bawah ini:

Contoh untuk efek marquee yang berjalan dari kiri ke kanan.

3. Efek marquee dengan background warna.
Kode scriptnya seperti di bawah ini:

    <div align="left"><span><marquee scrollamount="3" behavior="alternate" bgcolor="RED" width="100%">
    Tulisan Anda di sini
    </marquee></span></div>

Contoh efek marquee dengan background warna

4. Efek marquee yang berhenti ketika mouse berada pada teks area.
Kode scriptnya seperti di bawah ini:

    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="left" align="center" width="100%" height="20">
    Tulisan Anda di sini
    </marquee>

Penampakannya akan seperti di bawah ini:
Silahkan Anda coba arahkan mouse ke teks area di bawah ini.

Contoh efek marquee yang berhenti ketika mouse diarahkan ke teks area.

Agar berjalan ke kanan ganti left dengan right
Agar berjalan ke atas ganti left dengan up
Agar berjalan ke bawah ganti left dengan down

Demikian sharing Cara Membuat Efek Marquee Di Blog kali ini. Anda bisa berkreasi lebih banyak lagi dan lebih berpariasi lagi dengan menggunakan efek-efek marquee di atas. Jangan pernah takut untuk mencoba...karena kegagalan adalah awal dari sebuah keberhasilan.

Membuat Teks Area Keren Di Blog

Membuat Teks Area Keren Di Blog

Sesuai dengan namanya Membuat Teks Area Keren Di Blog, memang menurut saya teks area ini benar-benar keren. Dengan teks area ini, meskipun kita sebenarnya bukan profesional tapi kita seakan-akan profesional. Cara membuat atau menampilkannya di blog kita cukup mudah. Bagi yang tertarik untuk mencoba Membuat Teks Area Keren Di Blog silahkan simak postingan sederhana saya di bawah ini.

1. Login ke blog anda.
2. Masuk menu 'Layout-->Edit HTML
3. Centang kotak 'Expand Widgets Template
4. Cari kode ini </head> (gunakan CTRL + F di keyboard untuk memudahkan pencarian)
5. Letakkan script berikut ini di bawah kode </head> tadi.

6. Simpan Template Anda.

Nah untuk menampilkan teks area kerennya di postingan HTML gunakan kode-kode di bawah ini.

1. <div class="md1">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.