Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Sunday, June 23, 2013

Mengatasi Munculnya Tulisan #sthash Saat Copy Paste

Mengatasi Munculnya Tulisan #sthash Saat Copy Paste - Baru-baru ini saya sedikit risih dengan adanya tulisan ( - See more at: ) disertai URL halaman, kemudian di iringi juga dengan Hastag  #sthash saat Copy paste di blog CaraGampang ini.  kurang lebih tulisannya seperti ini :

- See more at: http://www.caragampang.com/2013/06/lagu-nasyid-malaikat-kecil-fikri-feat.html#sthash.meka0yVj.dpuf

Tulisan itu sangat risih karena selalu muncul saat kita copy paste suatu konten/artikel, pada akhir kalimat. Setelah saya cari penyebabnya ternyata hal ini disebabkan karena adanya integrasi terbaru yakni CopynShare addon dari ShareThis plugin untuk blogger sebagai media untuk membagikan konten blog. Jika kamu juga menggunakan widget tersebut, maka hal ini juga akan terjadi di blog sahabat.
Mungkin ada teman teman juga yang sedikit risih dengan munculnya tulisan tersebut, maka pada postingan kali ini saya akan  berbagi cara untuk menghilangkan tulisan tersebut pada saat copy paste.

1. Langkah pertama seperti biasa masuk ke TEMPLATE >> EDIT HTML kemudian cari kode berikut :

<script type='text/javascript'>stLight.options({publisher: "xxxxxxxxxx-xx-xxxx"});</script>

2. Untuk mempermudah silahkan cari dengan kata kunci :

stLight.options

3. Jika sudah ketemu, silahkan ganti kode di atas dengan kode berikut :

<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

4. Langkah terakhir, silahkan SAVE TEMPLATE.

Demikian langkah-langkah untuk menghilangkan tulisan #sthash pada saat Copy Pate. Semoga bermanfaat.

Saturday, September 29, 2012

Cara Mengaktifkan Akun OpenID di Blog

Cara Mengaktifkan Open ID pada Blog - akun Open ID ini sangat diperlukan oleh beberapa blogger untuk memberikan komentar saat Blogwalking. Tujuannya yaitu selain lebih mudah dalam memberikan komentar ada beberapa juga yang ingin menunjukan Link langsung pada komentar dengan tujuan mendapatkan Backlink dari yang punya blog.
Oke mungkin ada sobat yang lagi nyari cara untuk mengaktifkan akun Open ID nya berikut Cara Mengaktifkan Open ID pada Blog :

1. Cara Mengetahui Akun Open ID Blog Kita
Sebelumnya kita harus menetahui dulu Akun Open ID kita , sebenernya akun Open ID ini sama dengan URL blog kita. Contoh :
http://www.caragampang.com/ atau http://aa-solah.blogspot.com/
Cara mengetahuinya yaitu tentunya kita harus masuk dulu ke akun Blogger kita pilih menu Setelan > Lainnya > terus tinggal lihat menu Open ID disana sudah dituliskan URL Open ID kita. dimana URL itu dapat kita gunakan untuk Berkomentar pada Blog berplatform Blogspot.

2.Cara MemVerifikasi Akun Open ID
Kadang ada beberapa blog, meski kita sudah mengetahui alamat Open ID kita namun URL tersebut didak dapat digunakan untuk berkomentar dan malah keluar tulisan "Your openid Credentials Could Not be Verified" . Berarti disini kita harus memverifikasi dulu akun Open ID kita  bahwa Open ID itu benar-benar milik kita, caranya adalah :

  • Seperti biasa masuk dulu ke Blogger kita masing-masing.
  • Pilih menu Template > Edit HTML
  • kemudian cari kode <head> dan simpan kode berikut tepat setelah kode <head>

<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://aa-solah.blogspot.com' rel='openid.delegate'/>
  • Ganti tulisan warna merah dengan URL blog kita (URL Open ID)
  • Langkah terakhir tinggal Save Template 
  • Tunggu beberapa menit, maka anda sudah dapat berkomentar dengan akun Open ID tersebut.
Mungkin hanya ini yang dapat saya paparkan jika ada yang ditanyakan silahkan berkomentar , selamat mencoba Mengaktifkan Open ID pada Blog.

Tuesday, September 11, 2012

Membuat Form Search aga Mirip Yahoo pada Blog

Menu Pencarian adalah salah satu widget yang wajib ada pada suatu Blog/Web hal ini tentunya untuk mempermudah para pengunjung untuk mencari konten yang mereka maksud, dengan demikian para pengunjungpun bisa betah berlama-lama di blog kita, apalagi kalau konten yang kita sajikan menarik, bermanfaat, dan berbobot pula.. hehe
Langsung saja gak usah banyak cing-cong kali ini aaSolah akan berbagi CaraGampang membuat menu pencarian yang sedikit mirip dengan Yahoo , kenapa sedikit mirip.? yaa karena ini kaga mirip dengan menu Pencarian Yahoo..
Oke berikut Cara Membuat Menu pencarian aga mirip Yahoo pada Blog :
  • Seperti biasa kita kudu masuk ke Blog masing-masing..
  • Masuk ke menu Rancangan - Edit HTML
  • Jangan lupa centang dulu Expand Template Widget
  • Cari kode ]]></b:skin>
  • letkan kode CSS berikit di atas kode ]]></b:skin>
.searchform {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU1RdPDaGzq9GctJHVe3n8nPb02fgVBM5aYMyUIPiSUBP4WmSt_n32QWF6aNRYXz0kbCF2eMvCgVLW4-414-d0iY2ADgxG7z2I3QoTcV3h3ZVKmD7UMbaN_jBINS2xCH-DGyXaNPjCCmr2/s1600/CarGam-search.png) no-repeat; width:550px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #e5e5e5;width: 416px;outline: none;margin:5px 2px 0px 5px;;border-top:1px solid #888;border-left:1px solid #888;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.searchform .searchbutton {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMEw5HopcFghGMXoGkEC-0g8tZ17foeCLeliJy8PckOxKn8j0Q31EMzqRSb7A4UMv2GL_DzYZHAIutjMJ_5DSkIoEbYwzl76Ts-IIQpqTu87tg3Q86BHIllB4zSELJB2QCF-CyQvUnVnE0/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}
  • Kemudian Save Template
Eit jangan kemana-mana dulu sob , masih ada langkah berikutnya..
  • Sekarang kita balik lagi ke menu Rancangan..
  • Tambahkan Gadget baru pada template
  • Pilih HTML/Java Script
  • Kemudian masukan Script berikut :
<form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form>
  • Langkah Terakhir tinggal di Save
Kalo cara-cara yang saya jelaskan sobat ikuti sampai tuntas maka hasilnya seperti menu pencarian yang ada pada Blog ini.. atau gambarnya seperti ini...


Gimana Gampang kan cara bikinnya? kalo ada yang mau ditanyakan silahkan kasih komentar aja.. Selamat mencoba Menbuat Menu Pencarian yang Mirip Yahoo..

Thursday, September 6, 2012

Membuat Slide Gallery Foto Otomatis pada Blogspot

Kali ini saya akan sedikit berbagi CaraGampang untuk membuat Slide Otomatis berupa Gallery Foto , tutorial ini sengaja saya buat untuk memenuhi salah satu permintaan dari pengunjung CaraGampang.Com melalui FansPage.. Untuk contoh kurang lebih seperti Gallery Foto pada Sidebar Situs ini..
Gallery foto ini sudah otomatis berdasarkan Label atau kategory yang kita masukan, jadi sobat semua gak usah repot-repot masukin gambar dan ngasih judul.. Gimana ada yang berminat untuk dipasang di Blognya.?
Langsung saja simak langkah-langkah Membuat Slide Gallery Foto Otomatis pada Blogspot berikut :



  • Tentunya kudu masuk ke Blog masing-masing..
  • Masuk ke menu Rancangan/TataLetak.
  • Tambahkan Gadget Baru pilih HTML/Java Script.
  • Kemusian masukan Script Berikut.

<style>
#slides-outer {width:290px;height:200px;position:relative;margin:0 auto;background-color:#efefef;border: 5px #9a9a9a solid;-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);}

/* Menetralkan gambar */
#slides-outer img {margin:0px 0px;padding:0px 0px !important;background:transparent !important;border:none !important;outline:none !important;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
#slides .next,
#slides .prev {opacity:1 !important;}
/* Stop di sini */

#slides {position:absolute;z-index:100;font:normal 12px Arial,Sans-Serif;}
.slides_container {width:290px;overflow:hidden;position:relative;display:none;}
.slides_container div.slide, .slides_container div.slide img {width:290px;height:200px;display:block;overflow:hidden;}
.slides_container div.slide img {height:auto !important;}
.pagination{ display:none;}
#slides .next,
#slides .prev {position:absolute;top:70px;left:0px;width:24px;height:43px;display:block;z-index:101;}
#slides .next {left:266px;}
#slides .caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 10px 0 10px;background: #9a9a9a; opacity: 0.7;width:290px;font:normal 13px arial;color:#000;text-shadow:none;}
#slides .caption a {text-decoration:none;color:#000; font-size:12px; text-align: center;}
#slides .caption a:hover {text-decoration:underline;}
/* End SLIDES */
</style>

<!-- pake jquery-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://caragampangcom.googlecode.com/files/slides.min.jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            slideSpeed         : 350,
            slideEasing        : '',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>
</script>

<script type="text/javascript">
var showPostDate_g  = false,
    showComm_g      = false,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = true,
    slideLabelName  = "Ilmu Pertanian",
    pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDle_diQG20kmaYLahlYUHcYPfBBnYNgUMmdrE7ex4AfXyvnuDMqpUT0cfYw5gWowL45ymrcWWbAHi_BrJE52hU5pGFETI4IBSNp1R1HzvnpfGQacdBXCT6O5F_5vqPtt1s2AfiP0C_JUz/s1600/no-image-caragampang.jpg",
    text            = "Komentar",
    numposts_g      = 6,
    home_page       = "http://aa-solah.blogspot.com/";
</script>
<div id="slides-outer">
    <div id="slides">
        <script src="http://caragampangcom.googlecode.com/files/autoContent4SLIDES.js" type="text/javascript"></script>
        <a href="#" class="prev">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG5MQ-QY1hjFChpegMFoEdfiz3ID32PGafM8743EpbfIQst0TwVZvEwd0l1NpBR_1uTeBhxWW3StUJhn3q2ZnZnbWHUKstDZx-STI4C85tfgEzZh9nzaKS-sTS5Urn4s8V9POD_9PQjDfy/s1600/nav_left.png" width="24" height="43" alt="Arrow Prev" />
        </a>
        <a href="#" class="next">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYD0khYn4sKcNVlgwCi46FcXYRwZEfu1DvG_6rFPLs5KDhBeCXNGy5iQa5M0ZPHkkywTJCfvLpJX_MNKyVjoVomUpoK3GWAyOS7ArgvNuE01-CQ9IDpYx06M8S58bhCXsDR7SOJ2pTKddf/s1600/nav_right.png" width="24" height="43" alt="Arrow Next" />
        </a>
    </div>
</div>


  • Langkah terakhir tinggal Save.
UPDATE :
Jika scriptnya tidak bisa di copy , download scriptnya DISINI

KETERANGAN 
  1. Jika pada template sobat sudah ada kode jquery.min.js maka kode berwarna Biru di atas tidak usah ditambahkan..
  2. Ganti tulisan Ilmu Pertanian berwarna merah dengan label yang sobat inginkan..
  3. Jika sobat ingin Menampilkan Artikel Terbaru pada Slide ini silahkan ganti tulisan true berwarna Merah dengan False
  4. Ganti http://aa-solah.blogspot.com/ dengan alamat blog anda
Mungkin hanya ini yang dapat saya jelaskan jika , ada masalah atau ada yang ingin ditanyakan silahkan untuk berkomentar di bawah..
Semoga berhasil, Selamat mencoba Membuat Slide Gallery Foto Otomatis pada Blogspot

Tuesday, September 4, 2012

Membuat Daftar Isi Sederhana Berdasarkan Kategori

Membuat Daftar Isi Sederhana Berdasarkan Kategori
Kali ini saya akan sedikit berbagi cara membuat Daftar Isi sederhana di Blogspot, sebenarnya banyak sekali cara membuat daftar isi namun kali ini saya akan berbagi cara yang paling sederhana sehingga tidak terlalu berat ketika di pasang di BLOG. Daftar Isi sederhana ini diurutkan sesuai Label. mau tau gimana hasilnya.? Silahkan Copy kode berikut kemudian pasang pada Blog sobat, mau di postingan ataupun pada laman statis..
Untuk Demo-nya bisa dilihat disini

<script src="http://caragampangcom.googlecode.com/files/daftarisisederhana.txt"></script><br /> <script src="http://www.caragampang.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


NB ::  Ganti tulisan berwarna MERAH dengan alamat blog sobat..
Selamat mencoba untuk Membuat Daftar Isi sederhana pada Blog


Friday, July 6, 2012

Modifikasi Tampilan Facebook Like Box dengan CSS

Modifikasi Tampilan Facebook Like Box dengan CSS
Facebook merupakan salah satu Situs Jejaring Sosial terbesar saat ini, Tak aneh jika Facebook menyediakan beragam widget Facebook untuk Blog/Website salah satunya adalah Like Box Fans Page Facebook, meskipun Fans Page Facebook tidak mutlak di khususkan untuk Blog/Website, namun jika suatu Blog/Website memiliki FansPage Facebook dapat juga dijadikan sarana untuk promosi dan meningkatkan traffik Blog kita..
Kali ini saya akan sedikit berbagi bagaimana Modifikasi Tampilan Facebook Like Box dengan CSS karena mungkin sobat semua sudah bosan dengan tampilan Like Box Fans Page yang biasa-biasa saja. Oke langsung saja silahkan sobat lihat Demonya berikut ini :



Gimana apkah sobat tertarik dengan tampilan Tampilan Facebook Like Box yang sudah dimodifikasi ini? jika tertarik silahkan ikuti CaraGampang berikut :
Perhatikan kode berikut
<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US' type='text/javascript'/>
<script type='text/javascript'>FB.init(&quot;&quot;);</script>
<fb:fan connections='10' css='http://caragampangcom.googlecode.com/files/FB.css' header='0' height='200px' logobar='0' profile_id='175220759192447' stream='0' width='300px'/>
Silahkan pasang kode di atas sesuai kehendak sobat di Blog masing-masing..
Keterangan : silahkan di ganti kode berikut
  • Angka 10 : menunjukan jumlah thumbnail yang tampil.. 
  • 200 dan 300 : menunjukan tinggi dan lebar
  • Tulisan Merah : itu kode CSS-nya jika sobat bisa mengedit silahkan di edit, jika tidak bisa, gunakan saja CSS milik saya itu.
  • 175220759192447 : itu adalah ID Fans Page Facebook saya , silahkan diganti dengan ID Fans Page Facebook milik sobat masing-masing..
Contoh ID Fans Page facebook : 
http://www.facebook.com/CaraGampangCom/175220759192447
angka yang di akhir adalah ID Fans Page Facebook..
Mungkin cukup itu saja, jika ada yang tidak dimengerti silahkan berkomentar di bawah ini, selamat mencoba Memodifikasi Tampilan Facebook Like Box dengan CSS.

Monday, March 19, 2012

Widget Berlangganan via Email Pop Out untuk Blogspot ala Wordpress

Ini adalah widget baru untuk Blogger atau Blogspot, yang biasa kita liat pada pada Wordpress . Widget ini adalah widget Berbasis Jquery dengan efek popout Nice. Dengan memasang widget ini maka tampilan Berlangganan via Email menjadi lebih menarik, sehingga tidak menutup kemungkinan memperbanyak orang yang berlangganan via email, karena pengunjung dapat dengan mudah berlangganan artikel dari blog kita melalui email dengan satu kali klik saja.
Untuk membuat widget Berlangganan via Email yang mirip dengan Wordpress ini caranya sangat mudah karena kita hanya copy paste script saja.
 Oke cara membuatnya adalah sebagai berikut :

  • Seperti biasa masuk ke akun Blogger masing-masing
  • Masuk ke menu Rancangan -> Edit HTML
  • Beri centang pada kotak "Expand Widgets Templates"
  • Carilah kode   </head> 
  • Kalo sudah ketemu, simpan Script dibawah ini tepat di atas kode   </head> 
<style type="text/css">/*<![CDATA[*/ .FollowByEmail {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;} .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);} .w2bfollowButton {background: #464646;color: #CCC;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;} .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgORvP_WccCyzJzV9dGJRBtY7u76RWjVocClFXIWRKx4rJl4vshZxKMO0NCjruF-9N5Fa4XHzgoqX-XCIOJ_i3juNC5sFzVpHDv6AHgDmURDjZYgghYaqyivv5PXEh_maAwHMBA5tHurUPu/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;} .w2bfollowButton:hover,.followActive {color: #fff !important;} .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;} .followactive {background-color: #333;} .follow-by-email-inner {padding: 15px;} .FollowByEmail h2 {padding: 15px 15px 0;font-size: 18px;margin: 0 0 10px;font-weight: normal;} .follow-by-email-inner p {margin: 0 0 10px;} .follow-by-email-inner .follow-by-email-address {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;} .follow-by-email-inner form {text-align: center;} .follow-by-email-inner td{display: inline-block;width:100%;text-align:center;} .follow-by-email-inner .follow-by-email-address:focus {color: #000;border-color: #000;} .follow-by-email-inner .follow-by-email-submit {cursor: pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;} .follow-by-email-submit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;} .follow-by-email-submit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;} .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;} .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;} .w2bFollowFooter a:hover {color: #fff;background: none;}/*]]>*/</style><script type="text/javascript">/*<![CDATA[*/;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b(".FollowByEmail");followBox.prepend("<a class=\"w2bfollowButton\" href=\"#\"><span>Follow</span></a>");w2b("<p></p>",{class:"w2bFollowFooter",html:"<a href=\"http://feedburner.google.com\" target=\"_blank\">Delivered by FeedBurner</a>"}).appendTo(followBox.find(".follow-by-email-inner"));followBox.find("td:last").removeAttr("width");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").animate({bottom:followHeight},{duration:200,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").animate({bottom:"0"},{duration:400,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);/*]]>*/</script>
  • Langkah terakhir Simpan Template
Gimana Sobb, mudah kan cara membuatnya, selamat mencoba Membuat Widget Berlangganan via Email Pop Out untuk Blogspot ala Wordpress

Sunday, March 18, 2012

Memasang Status Terbaru Twitter pada Blog

Memasang Status Terbaru Twitter pada Blog
Saya rasa hampir semua Blogger memiliki Twitter, twitter ini dapat kita gunakan juga sebagai media untuk mempromosikan Blog melalui media Twitter. Maka dari itu untuk kali ini saya akan berbagi widget twitter yang dapat ditampilkan pada blog kita, tepatnya yaitu menampilkan status terbaru twitter pada blog .
Untuk lebih jelasnya silahkan lihat gambar berikut :

Kurang lebih tampilan widgetnya seperti itu, sahabat bisa memasang widget ini di area sidebar blog sobat, atau di tempat lain yang sobat inginkan.. Untuk sahabat yang berminat dengan widget yang satu ini silahkan simak langkah langkahnya sebagai berikut :
  • Seperti Biasa masuk dulu ke akun Blogger masing masing.
  • Nasuk ke menu Rancangan >> Tambah Gadget 
  • Pilih HTML/Java Script (Beri judul sesuai keinginan)
  • Kemudian Paste kode berikut :
<style type="text/css">ul#twitter_update_list{list-style:none;margin:20px
0;background:none;}ul#twitter_update_list li{list-style:none;background:url
(http://3.bp.blogspot.com/-
EOVUNHdEphQ/ThL4DoMu7sI/AAAAAAAABDo/_7SaXVPFzPo/s26/w2b_twit_bullet.png) no-
repeat scroll left 6px transparent;padding:2px 0  2px 30px;margin:0 0
5px;display:block;}ul#twitter_update_list li a
{display:inline;background:none;}.tfoot{position:relative;background:url
(http://4.bp.blogspot.com/-
SPrPCoDdEDk/ThMAJKJl1aI/AAAAAAAABDs/LrzS00Ve49g/s1600/mttwitterbird.png) no-
repeat scroll left 6px transparent;padding:15px 0  15px 50px;display:block;}
</style><ul id="twitter_update_list"></ul><script type="text/javascript"
src="http://twitter.com/javascripts/blogger.js"></script><script
type="text/javascript"
src="http://twitter.com/statuses/user_timeline/aa_solah.json?
callback=twitterCallback2&count=5"></script><div class="tfoot"
style="clear:both;">Follow me <a href="http://twitter.com/aa_solah"
target="_blank">@aa_solah</a><a style="position:absolute;line-
height:0;right:0;" href="http://www.way2blogging.org/2011/07/awesome-latest-
tweets-twitter-widget.html" target="_blank" title="Get This Widget on
Way2Blogging!"><img src="http://img1.blogblog.com/img/blank.gif"
style="width:4px;height:4pxdorder:0 none;padding:0;margin:0;" /></a></div>
Keterangan : silahkan tulisan aa_solah berwarna merah diganti dengan ID Twitter sobat. selamat mencoba Memasang Widget Status Terbaru Twitter pada Blog

Membuat Tombol Berbagi Social Network Melayang


Sebelumnya kita pernah membuat Cara membuat Tombol Share atau Share Button Blogger di bawah postingan kali ini kita akan belajar Membuat Tombol Berbagi Social Network Melayang di samping blog . Menurut saya tombol sher Social Network ini adalah salah satu widget penting untuk blog kita, karena jika kita memasang tombol sher maka kita atau pengunjung dapat dengan mudah membagikan artikel di blog kita ke media Social, dengan begitu ini adalah salah satu cara untuk memperbanyak pengunjung blog kita. 
Di Tombol Berbagi Social Network Melayang telah disediakan, Tombol Google Plus, Tombol Sher Facebook, Tombol Twitter dan tombol Social media lainnya. dan untuk contoh silahkan sobat lihat gambar di atas atau lihat LIVE DEMO disini..
Untuk menambahkan widget yang satu ini sangat gampang kok, karena tanpa edit template terlebih dahulu. Oke untuk sobat yang pengen silahkan simak Cara Membuat Tombol Berbagi Social Network Melayang.

  • Seperti Biasa masuk dulu ke akun Blogger masing masing.
  • Nasuk ke menu Rancangan >> Tambah Gadget 
  • Pilih HTML/Java Script (gak dikasih judul juga gak apa-apa)
  • Kemudian Paste kode berikut :
<!-- floating page sharers Start--> <style type="text/css"> #pageshare {position:fixed; bottom:25%; margin-left:-790px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share to Your Friends"> <div style="clear: both;font-size: 16px;text-align:center;"> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <div class='sbutton' id='rt'> <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script> </div> <div class='sbutton' id='rw'> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_counter"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4d764bd843e747be"></script> <a href=" http://www.caragampang.com/2012/03/membuat-tombol-berbagi-social-network.html "/>Get this</a> <!-- floating page sharers End --></div></div>
NB : Untuk mengatur letak, silahkan ganti angka 790 berwarna merah untuk mengatur letaknya, semakin besar angkanya makin menjorok ke kiri, dan semakin kecil angkanya semakin menjorok ke kanan..
Gimana sobat mudahkan membuatnya. Sekarang anda dapat memperaktekan Cara Membuat Tombol Berbagi Social Network Melayang

Merubah Cursor menjadi Menarik - Fancy Cursor

Membuat Cursor menjadi Menarik - Fancy Cursor
Hay sahabat yang baik hati, Sebelumnya kita pernah belajar  Merubah Kursor pada Blogspot  kali ini kita juga akan Belajar untuk merubah cursor blog namun yang ini sering disebut Fancy Cursor , daripada saya bingung menjelaskannya mending sobat lihat langsung Demonya kurang lebih seperti ini. Silahkan arahkan kursor sobat ke tulisan berikut :

Hand


Crosshair


Text


Help


Move


Wait


Gimana sob, terlihatkan perbedaannya , kalo sobat ingin merubah cursor menjadi Fancy Cursor silahkan sobat copy paste script berikut pada postingan blog sobat (Edit HTML)
<span style="cursor :hand">masukan kalimat</span>
Keterangan : Silahkan sobat ganti tulisan warna biru dengan tulisan contoh di atas (Hand, Crosshair, Text, Wait, Move, Help). Kemudian ganti tulisan merah dengan kata kata yang yang sobat akan beri efek Fancy Cursor .

Monday, March 12, 2012

Membuat Widget Pengganti Warna Background Blog


Membuat Widget Pengganti Warna Background Blog
Widget yang ini hampir sama dengan Membuat Widget Ganti Font pada Blogspot sama sama mengganti secara otomatis, namun sekarang yang berganti secara otomatis yaitu  Background Blog. Jadi kalo kita memasang widget yang satu ini maka hanya dengan sekali pencet tombol pada widget ini, maka backgroun blog kita dapat berubah secara otomatis, tanpa harus mengedit template dulu.
oke untuk yang berminat silahkan simak cara Membuat Widget Pengganti Warna Background Blog

  • Seperti biasa masuk kea kun Blogger masing-masing .
  • Klik Rancangan >> Elemen Laman >> Tambah Gadget.
  • Pilih HTML/JavaScript.
  • Masukan kode berikut kemudian Save.
<script type="text/javascript"> function bgChange(bg) { document.body.style.background=bg; } </script><br /> <table border="1" width="300" height="300"><tr> <td onclick="bgChange('')" bgcolor="white"><br /> <td onclick="bgChange('#0000ff')" bgcolor="#0000ff"><br /> <td onclick="bgChange('#000000')" bgcolor="#000000"><br /> <td onclick="bgChange('#a52a2a')" bgcolor="#a52a2a"><br /> <td onclick="bgChange('#5f9ea0')" bgcolor="#5f9ea0"><br /> <td onclick="bgChange('#d2691e')" bgcolor="#d2691e"><br /> <td onclick="bgChange('#6495ed')" bgcolor="#6495ed"><br /> <td onclick="bgChange('#dc143c')" bgcolor="#dc143c"><br /> <td onclick="bgChange('#00ffff')" bgcolor="#00ffff"><br /> <br /> <td onclick="bgChange('#00008b')" bgcolor="#00008b"><br /> <td onclick="bgChange('#b8860b')" bgcolor="#b8860b"><br /> </td onclick="bgchange('#b8860b')"></td onclick="bgchange('#00008b')"></td onclick="bgchange('#00ffff')"></td onclick="bgchange('#dc143c')"></td onclick="bgchange('#6495ed')"></td onclick="bgchange('#d2691e')"></td onclick="bgchange('#5f9ea0')"></td onclick="bgchange('#a52a2a')"></td onclick="bgchange('#000000')"></td onclick="bgchange('#0000ff')"></td onclick="bgchange('')"></tr> </table>
Selamat mencoba Membuat Widget Pengganti Warna Background Blog.

Membuat Widget Ganti Font pada Blogspot

Membuat Widget Ganti Font pada Blogspot

Widget yang satu ini adalah widget untuk mengganti jenis hurup pada blog kita, jadi kalo sobat memasang widget ini, maka blog sobat kurang lebih seperti Microsoft Word, Microsoft Excel, yang bisa danti-ganti jenis hurup. tidak ada salahnya kan kalo sobat mencoba dulu widget yang satu ini, sapa tau aja sobat tertarik, jika tidak tertarik gampang kan tinggal menghapus widgetnya.
oke buat sahabat yang berminat silahkan disimak cara Membuat Widget Ganti Font pada Blogspot :
  • Seperti biasa masuk kea kun Blogger masing-masing .
  • Klik Rancangan >> Elemen Laman >> Tambah Gadget.
  • Pilih HTML/JavaScript.
  • Masukan kode berikut kemudian Save.
<div class='widget-content'><center><script> function go1(){ if (document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value != "none") { document.getElementById('main').style.fontSize =document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value } }  function go2(){ if (document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value != "none") { document.getElementById('main').style.fontFamily =document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value } } </script><br /> <form id="forma" name="selecter2" method="POST"><br /> <select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1"><br /> <option value="Times New Roman" />Times New Roman<br /> <option value="Arial" />Arial<br /> <option selected value="Book Antiqua" />Book Antiqua<br /> <option value="Bookman Old Style" />Bookman Old Style<br /> <option value="Century Gothic" />Century Gothic<br /> <option value="Comic Sans Ms" />Comic Sans Ms<br /> <option value="Tahoma" />Tahoma<br /> <br /> <option selected value="Trebuchet Ms"//>Trebuchet Ms<br /> <option value="Verdana" />Verdana<br /> </select><br /> <select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1"><br /> <option value="8px" />8<br /> <option value="9px" />9<br /> <option value="10px" />10<br /> <option value="11px" />11<br /> <option selected value="12px" />12<br /> <option value="14px" />14<br /> <option value="16px" />16<br /> <option value="18px" />18<br /> </select></form><center></center></center><br /> </div>
 Gimana sob mudah kan, semoga berhasil.. Selamat mencoba Membuat Widget Ganti Font pada Blogspot

Saturday, March 10, 2012

Membuat Teks Area disertai Tombol Select

Membuat Teks Area disertai Tombol Select
Teks area yang satu ini biasanya  digunakan untuk menyinpan Script banner pada Tukar Link tujuannya untuk memudahkan mengcopy script karena dengan meng-klik tombol Select maka Script/Kode langsung ter-Blok secara otomatis. Pokonya teks area dengan Tombol ini bisa duganakan untuk menyimpan apa saja Script, Teks, dan lain lain. Untuk Contohnya kurang lebih seperti ini :


Okeh, untuk sobat yang pengen Membuat Teks Area disertai Tombol Select  silahkan Copy script berikut :
<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width:200px; height:60px;" name="txt"> MASUKAN SCRIPT, TEKS, ATAU YANG LAINNYA</textarea></p></form>
Silahkan teks yang berwarna merah diganti dengan Teks yang sobat ingin masukan kedalam area tersebut. selamat mencoba dan semoga berhasil Membuat Teks Area disertai Tombol Select .

Thursday, March 8, 2012

Memberikan Efek Daun Berjatuhan pada Blog

Memberikan Efek Daun Berjatuhan pada Blog
Hallo sobat Blogger, tutorial ini saya persembahkan buat sahabat yang lagi belajar ngeblog, barangkali ingin tampilan blognya lebih terlihat menarik dan keren, efek ini hampir sama dengan Efek salju berjatuhan, namun kalo ini berupa daun yang berjatuhan. pokonya sangat cocok buat mempercantik tampilan blog kita. oke yang berminat silahkan simak Cara Memberikan Efek Daun Berjatuhan pada Blog :
  • Seperti biasa masuk ke akun Blogger masing-masing
  • Masuk ke menu Rancangan -> Edit HTML
  • Beri centang pada kotak "Expand Widgets Templates"
  • Carilah kode </head>
  • Kalo sudah ketemu, simpan Script dibawah ini tepat di atas kode  </head>
<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>
  • Langkah terakhir simampan template
Gimana sob gampang kan  Cara Memberikan Efek Daun Berjatuhan pada Blog . yaudah deh selamat mencoba semoga berhasil.. oia terimakasih sudah berkunjung ke SitusMadu - manisnya Belajar dan Berbagi.

Wednesday, March 7, 2012

Membuat Pesan Berjalan Di Tab Browser

Membuat Pesan Berjalan Di Tab Browser
Sebenarnya ini hampir sama dengan Membuat Teks Berjalan di Menu Bar. namun kali ini kita akan mempermudah cara membuatnya tanpa mengedit template. Untuk contohnya mungkin sahabat sering melihat teks berjalan di samping icon Blog (menu bar/Tab Browser). oke untuk sahabat yang tertarik silahkan simak langkah langkah berikut :
  • Seperti biasa masuk kea kun Blogger masing-masing .
  • Klik Rancangan >> Elemen Laman >> Tambah Gadget.
  • Pilih HTML/JavaScript.
  • Masukan kode berikut kemudian Save (gak usah dikasih nama)
<script type="text/javascript">
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new tb8_makeArray(4);
tb8_messages[0] = "Selamat Datang Sobat";
tb8_messages[1] = "di Situsmadu";
tb8_messages[2] = "Manisnya Belajar dan Berbagi";
tb8_messages[3] = "Terima kasih kunjungannya";
tb8_rptType = 'infinite';
tb8_rptNbr = 6;
tb8_speed = 120;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>
Keterangan : Tulisan berwarna Biru silahkan sobat ganti dengan kata-kata yang diinginkan..
Gimana Sobat, mudah kan..? semoga berhasil Membuat Pesan Berjalan Di Tab Browser

Tuesday, March 6, 2012

Membuat Kotak Admin di Bawah Postingan Blog

Membuat Kotak Admin di Bawah Postingan Blog
Dalam rangka memperlengkap artikel di Blog ini, kali ini saya akan berbagi Tutorial blog tepatnya yaitu Cara Membuat Kotak Admin di Bawah Postingan Blog, mungkin Tutorial ini sudah banyak berkelimangan di internet yang disebarkan oleh para Blogger, tapi tidak ada salahnya juga kan kalo saya berbagi tutorial yang satu ini. Kotak admin ini sangat bermanfaat untuk Blog kita, selain untuk mempercantik tampilan Blog kita, kotak admin ini juga katanya sih merupakan SEO untuk Blog kita. Oke deh untuk lebih jelasnya silahkan lihat gambar dibawah :
Untuk sahabat yang pengen Kotak Admin ini silahkan ikuti langkah langkah Membuat Kotak Admin di Bawah Postingan Blog :

  • Seperti biasa masuk ke akun Blogger masing-masing
  • Masuk ke menu Rancangan -> Edit HTML
  • Beri centang pada kotak "Expand Widgets Templates"
  • Carilah kode  ]]></b:skin>
  • Kalo sudah ketemu, simpan Script dibawah ini tepat di atas kode  ]]></b:skin>
.kotak-admin{display:block; width:auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNOCHCxAGrA6Hw9M0DKgRWqq4Z0pNJ6BDBtnTSIsTb294A2pccmbsyHu9sWLm_A-1RlYibsLTsiIYUV_wp-p5NXds6fhoGDBgEkrmnteFSW2FwfJnJEQ5fVnROOH1rA1ZLm5wOLbxeeej/); border:2px solid #fff;box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;padding:0;margin:30px 0 10px 0;font:normal 12px Arial, Sans-Serif;color:#222;}
.kotak-admin .kontainer-admin{padding:5px;}
.kotak-admin h4{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNOCHCxAGrA6Hw9M0DKgRWqq4Z0pNJ6BDBtnTSIsTb294A2pccmbsyHu9sWLm_A-1RlYibsLTsiIYUV_wp-p5NXds6fhoGDBgEkrmnteFSW2FwfJnJEQ5fVnROOH1rA1ZLm5wOLbxeeej/);border:none;border-bottom:1px solid #699019;color:#000;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}
.kotak-admin h4 a{color:#222;}
.kotak-admin img{width:70px;height:70px;margin:0 10px 0 0;float:left;border:1px solid #954B02;padding:2px;background:#C36702;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

  • Kemudian cari kode yang mirip dengan kode berikut  <div class='post-footer'>
  • Kalo sudah ketemu silahkan simpan kode berikut di atas kode <div class='post-footer'>

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='kotak-admin'>
<h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Tutorial Blog | Tips Trick | Jejaring Sosial</h4>
<div class='kontainer-admin'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia1U6MSFiTsR05uaYx7wmcdAobYpo7usI9pznvzSgXJbjVC9gTFGAX90aT8KhKm7XYTaKaszlcBa99a-gVfamsEwdA8IIQ01uPSF9Wf1f1yvYHqkAYspFg7qOD_JLEpaOjFpptBvm3Bsc/s200/efek+salju+pada+blog.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini dipublish oleh <data:post.author/> pada hari <data:post.dateHeader/><br/>Terima kasih Anda telah membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> , Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi Blog dan teman-teman anda, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya. Semoga artikel ini bermanfaat dan menambah wawasan kita semua. Jika anda menyukai Blog ini, silahkan like di facebook dan follow kami di twitter. Terima kasih atas kunjungan serta kesediaan Anda membaca dan berkomentar tentang artikel ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://situsmadu.blogspot.com/2012/03/membuat-kotak-admin-di-bawah-postingan.html' target='_blank' title='Get this widget !'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
  • Ganti tulisan berwarna Merah dengan URL foto sobat atau URL gambar yang sobat kehendaki.
  • langkah terakhir tinggal Save/Simpan Template
Selamat mencoba, dan semoga berhasil Membuat Kotak Admin di Bawah Postingan Blog.


Monday, March 5, 2012

Cara Membuat Tabel pada Blog

Cara Membuat Tabel pada Blog
Mungkin sahabat semua pernah bertanya tanya bagaimana membuat table pada Blog, kalo membuat table di computer sih gampang kita bisa pake Ms.Excel atau membuat Ms.Word.. tapi kalo di Blog kita harus menggunakan kode HTML, caranya mudah kok tinggal ikuti langkah langkah sebagai berikut.. :
<table border="1"><tr><td></td> <td></td>  </tr></table>
Keterangan:
<table> merupakan perintah untuk membuat tabel
<tr> merupakan perintah untuk membuat baris
<td> merupakan perintah untuk membuat kolom
border merupakan perintah untuk mengatur ketebalan garis pinggir. Silahkan ganti nilainya sesuai keinginan

Sebagai contoh jika anda memasukkan kode seperti ini.

<table border="1"> <tr> <td>Konten 1</td> <td>Konten 2</td> </tr> </table>
Maka hasilnya akan menjadi seperti ini:

Situs madu AA solah

Selamat mencoba Membuat Tabel pada blog

Cara Memasang Efek salju pada Blogspot


Cara Memasang Efek salju pada Blogspot
Hay sahabat yang baik hati,, mau tampilan blog anda menjadi lebih keren ? lebih cool ? dan terlihat lebih hidup.. yuk tambahkan efek salju pada Blog, caranya gampang kok.. berikut Cara Memasang Efek salju pada Blogspot :
  • ·         Seperti biasa masuk kea kun Blogger masing-masing .
  • ·         Klik Rancangan >> Elemen Laman >> Tambah Gadget.
  • ·         Pilih HTML/JavaScript.
  • ·         Masukan kode berikut kemudian Save.
<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>
Giman sobat, mudah kan, Semoga Blognya terlihat lebih hidup :) dengan Memasang Efek salju pada Blogspot

Menambahkan Burung Twitter pada Blog

Dulu saya juga pernah Menambahkan Burung Terbang Twitter pada Blog saya sebelum Blog saya pindah ke SitusMadu – Manisnya belajar dan berbagi tepatnya yaitu di Blog www.asolah.co.cc . silahkan ditengok aja, blognya masih hidup kok..hehe
Brung terbang ini fungsinya untuk menambahkan akun twitter di Blog, sekaligus mempercantik tampilan Blog kita, sapa tau aja ada yang Follow twitter kita . Buat sahabat yang mau silahkan simak langkah-langkah Menambahkan Burung Twitter pada Blog
  • ·         Seperti biasa masuk kea kun Blogger masing-masing .
  • ·         Klik Rancangan >> Elemen Laman >> Tambah Gadget.
  • ·         Pilih HTML/JavaScript.
  • ·         Masukan kode berikut kemudian Save.
<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script><script type="text/javascript">var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');var twitterAccount = Http://twitter.com/aa_solah';var twitterThisText ='';tripleflapInit();</script>
Ganti tulisan aa_solah berwarna merah dengan user Twitter masing masing. Eitt janganlupa disimpan ya gadgetnya gak usah dikasih nama. Selamat mencoba dan semoga berhasil Menambahkan Burung Twitter pada Blog.

Membuat Artikel Dua kolom pada Blogspot

Membuat Artikel Dua kolom pada Blogspot
Hay sahabat Blogger yang baik hati, kali ini aA akan sedikit berbagi cara membagi teks menjadi dua kolom seperti pada Koran, mungkin sudah banyak Tutorial Blog yang memberikan cara ini, namun artikel ini sebenarnya hanya untuk memperlengkap isi dari Blog ini, sekaligus update Blog lah.. Untuk sahabat yang blum tau caranya dan ingin tau silahkan simak langkah langkahnya.
Langkah pertama seperti biasa,  kita harus masuk ke Blogger masing masing.
Buat postingan baru dan pilih Edit HTML
masukkan script seperti ini :

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="250">
MASUKAN ARTIKEL BAGIAN KIRI</td><td align="justify" valign="top"width="250">MASUKKAN ARTIKEL  BAGIAN KANAN</td> </tr>
</tbody></table>
Keterangan:
  • cellpadding: atur jarak antara tepi kolom dengan tulisan 
  •  cellspacing: atur jarak antara dua kolom 
  • width: Silahkan rubah sesuai yg di inginkan (ukuaran template anda)
  • align: perataan teks (justify untuk rata penuh, left untuk rata kiri, right untuk rata kanan dancenter untuk rata tengah) 
    Salamat mencoba.. semoga berhasil dalam  Membuat Artikel Dua kolom pada Blogspot

    Labels

    1 column 2 column 3 column 4 column aaSolah Accessories add button subscrise for blogger Add Digg Button to Blogger add feedburner for blogger add like button facebook to blogger Add Pinterest Pin it Button to Blogger add sitemap blogger to google add stumbleUpon badge to blogger Ads Ready afghan afghan stitch AGULHAS AMIGURUMI Anchor text Ảnh đẹp Ảnh vui Animasi applique Art artikel Árvore de Natal em croche Aulia baby crochet Baby Dress baby knitting Baby learn bag Bags Bài viết BAKTUS Ballet Bun Cover balloons BARRADOS Bayi Bead Beads Bear Ear Hat BEBÊS belts Berita Berry Best WP Theme 2014 Better Blogger Seo Biologi Black blanket Blogal Template Blogger Codex Blogger Images Slider blogger navbar Blogger Rating blogger template 2014 Blogger Templates Blogger Tool Tip Blogger Tutorials Blogger Widgets Blogger-Template Blogspot Blogspot Templates Blue BLUSAS BOINA BOLEROS BOLSAS books BORBOLETAS Bounce Rates bows boxes bracelet Brown Browse Business Butterfly Button Counter Button Facebook CACHECOL CACHECOLAR cake candles candy Candy Cane Cards carving carving fruit carving fruits CASACO INFANTI CASACOS CASAQUINHO EM CROCHE CASAQUINHO EM TRICO CASAQUINHO PARA BEBÊ Cerpen CHAPEU clay COLAR COLAR DE FLORES COLETE coloring Competitor Research Contact Form for Blogger CORDÃO CORUJUINHAS crafts CROCHE COM SAQUINHOS PLASTICOS CROCHE IRLANDES Crochet Crochet Geek crochet pattern cross stitch Curtain customize cutting paper DECORAÇAO Design blogger template Dicionário de Trico - Inglês/Portugues Digg button Dijual Documentation Doily Domain dress dwell time earring ECHARPE Ecommerce Embroidery ENXOVAL PARA BEBÉ ESTOLAS Event Exit Rates facebook facebook button facebook like in blogger facebook share button facebook share button with counter FAIXA PARA CABELOS fashion Favicon for blogger feed rss Felt Fisika Flat News Templates FLORES Flower flower arrangement flowers crochet Folding paper FOLHAS food food decor Foto Free Blogger Templates Free Download Blogger Templates FREE FORM Free Premium frustration Funny Galaxy Stitch Gallery Games garden Gaya Hidup gel grips Geografi gift Gifts Girl glass Go Green GOLINHAS Google Google Analytics Google Merged All Accounts into One google plus button Google SERPs Google Webmaster Tools Google+ Google+ comment GORRO GRÁFICOS Granny Square Gray Green hair clip Haji Hama hats Heart Hexagon hide blogger navbar holiday craft holiday crafts home and garden Hook how to how to add favicon for blogger how to add feedburner How to install flat news how to turn off google plus comment how-to-guides Hunian Iklan Baris Ilmu Pertanian Image Thumbnail for Blogger imam Indexed Quickly for blogspot iNews 2014 Blogger Template Info Kontes Installing Blogger Template Internet Iseng Islam Itunes jewelery jewelry Karma Blogger Template Kata Bijak Kata Mutiara Kesehatan Kewarganegaraan Keyword Research Kiếm tiền kirigami Knit knitting knitting pattern knot Kuliner Landing Page Blogger Templates Lập trình Blogspot Latent Semantic Indexing LEAVES Like button facebook Lirik Lagu LirikNasyid Log Cabin Square LSI LUMINÁRIAS LUVAS LUVINHAS PARA BEBÊ Magazine Magazine Blogger Template make up making flower making flowers Making toys Manta MANTA PARA BEBÊ MANTA PARA SOFÁ Mashable MEUS MOMENTOS MEUS TRABALHOS mittens motif Motivasi Movie Multiples Music Nail art Nature necklace News News blogger template News Google News Pro Blogger Template Nivo image slider Olah Raga On page seo Online store Orange Organik Origami Pagerank painting PANTUFAS PAP Paper Patchwork PELERINE Penyakit Tanaman Peribahasa Personal Phần mềm pictures Pilihan Pillows Pink plastic POLAINA PONCHO Popcorn Popular Posts Popular Posts Code For Blogger Portfolio post automatically to twitter Premium Blogger Teamplates professional blogger templates Profil puff stitch Puisi pumpkin cap QUADRADO Quilling paper Quilt RECEITA RECEITA CULINÁRIA RECEITA DE PONTOS recycle recycling Red redirected to FeedBurner Related Post Widget remove navbar blogger RENDA DE PELO DE CABRA repair work Responsive Blogger Template retweet button ribbon rings rss for blogger rugs SACOLAS SAIAS DE CROCHE SANDÁLIAS EM CROCHÊ SAPATINHOS SAPATINHOS PARA BEBÊ Sastra Scarf scarves search engine optimization Search engine users seo Seo Blogger Template SEO Course Outline Seo For Blogger SEO Friendly Seo in 2014 Seo tips Seo Tutorial Seo Tutorial 2014 Seo With Blogger Serba Info Serba Tips serps sewing share button share twitter button shawls shoes and sandals Simple Singing sitemap blogspot sitemap page skirt Slider for blogspot snood Snowflake soap socks SQUARE steps to design a nice blogger template Strawberry subscrise button SUÉTER sweater Swiffer Sweeper Cover Syahira blogger theme TABELAS DE MEDIDAS DE TRICO E CROCHE tablecloths Tanaman Padi TAPETES. RECEITA Template TENIS PARA BEBÊ Thank you the panda update Thủ thuật Tien Nguyen tip tips Tips and Tricks TOALHAS TOUCAS TOUCAS PARA BEBÊ Travel TRICO Từ điển Blogspot TÚNICA tunisian turn off google plus comment Tutorial Tutorial Blog Tutorial video twitter button Twitter follow button twitter for blogspot underwear Valentine's day Vegeta Blogger Templates Video VÍDEO Video Blogger Templates video tutorial weaving Web 2.0 wedding Wedding Mag what is a bounce What Is Anchor Text what is bounce rate What is Seo White WIDGET Widget For Blogger wood Wordpress Look WordPress Themes XALE Yellow Youtube