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..

Read More

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

Read More

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.

Read More

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

Read More

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

Read More

Membuat Tombol Berbagi Social Network Melayang

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

Read More

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.

Read More

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

Read More

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.

Read More

Membuat Blogroll Dengan Marquee

Membuat Blogroll Dengan Marquee
Ini adalah salah satu widge yang memberikan efek berjalan dari atas ke bawah atau sebalik dari bawah ke atas. anda dapat memasukan Banner Sahabat, Daftar Isi, Daftar Link, Counter Blog, ataupun yang lainnya. sehingga jika kita menggunakan efek Marquee maka kita dapat menghemat Tempat di Blog kita dan Blog terlihat lebih rapih.
Untuk memberi Efek Marque ini caranya gampang ko, kita hanya membutuhkan Script marque, dan Scriptnya adalah sebagai berikut :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://situsmadu.blogspot.com" target="_blank">Situs Madu</a>
<br/><br/>
<a href="http://asolah.co.cc" target="_blank">aa Solah</a>
<br/><br/>
<a href="http://aatemplates.blogspot.com" target="_blank">Blogger Template</a>
<br/><br/>
<a href="http://youtube.com" target="_blank">YouTube</a>
<br/><br/>
<a href="http://pusatpromosiindonesia.blogspot.com/" target="_blank">Pusat Promosi</a>
<br/><br/>

</marquee>

Keterangan : 

• Ganti Kode dibawah dengaqn Link Sahabat, atau Script Banner Sahabat

 <a href="http://situsmadu.blogspot.com" target="_blank">Situs Madu</a>
<br/><br/>
<a href="http://asolah.co.cc" target="_blank">aa Solah</a>
<br/><br/>
<a href="http://aatemplates.blogspot.com" target="_blank">Blogger Template</a>
<br/><br/>
<a href="http://youtube.com" target="_blank">YouTube</a>
<br/><br/>
<a href="http://pusatpromosiindonesia.blogspot.com/" target="_blank">Pusat Promosi</a>
<br/><br/> 

• scrollamount="2" == angka "2" menunjukan kecepatan gerakan, jika ingin lebih cepat bisa diganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5" 
• direction="up" == tulisan "up" menunjukan arah gerakan keatas, bisa di rubah dengan mengganti kata "up" menjadi "down, left, right". Misal : direction="down", direction="left" , direction="right". 
• width="50%" == tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%" 
• height="200"  == tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400", height="250" .

Selamat mencoba semoga berhasil Membuat Blogroll Dengan Marquee

Read More

Memasang Widget Komentar Terakhir

Memasang Widget Komentar Terakhir.
Pada Widget yang satu ini sebenarnya tidak hanya menampilkan Komentar Terakhir saja melainkan pada widget ini ditampilkan juga nama orang yang berkomentar dan Artikel yang dikomentari.. Mungkin sobat semua juga sudah sering membuatnya..
oke langsung saja ini cara Memasang Widget Komentar Terakhir :

• 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 :

<script style="text/javascript" src=" http://amen24.googlepages.com/showrecentcomments.js
"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://situsmadu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

• Langkah terakhir tinggal disimpan.

Keterangan : 

http://situsmadu.blogspot.com = ganti dengan alamat Blog sobat

5 = Jumlah Komentar terakhir yang ingin ditampilokan

Selamat mencoba, dan semoga berhasil Memasang Widget Komentar Terakhir

Read More

Menambahkan Tombol Like Facebook di Atas Postingan Blog

Menambahkan Tombol Like Facebook di Atas Postingan Blog. 
Pada dasarnya hampir sama dengan Menambahkan Tombol Like Facebook di Bawah Postingan Blog, silahkan baca dulu supaya tau manfaat dari Tombol Like Facebook . Kalo sudah langsung saja kita Buat Tombol Like Facebook di Atas 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 yang mirip dengan kode dibawah ini supaya gampang carinya pencet CTRL + F:

<data:post.body/>

Kalo sudah ketemu simpan kode berikut tepat dibawah kode <data:post.body/>

<iframe allowTranrparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=400&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/></div>

• Langkah terakhir Simpan Template. 

Silahkan lihat hasilnya pada Blog sobat, sekarang sobat sudah memiliki Tombol Like Facebook di Atas Postingan Blog.

Read More

Menambahkan Tombol Like Facebook di Bawah Postingan Blog

Menambahkan Tombol Like Facebook di Bawah Postingan Blog
Hallo Sahabat Blogger, pastinya sudah tau kan Tombol Like itu seperti apa, kalo belum tau, contohnya seperti di atas Postingan di SitusMadu ini.. Pokunya tombol Like ini sangat berguna buat yang punya Blog/Website karena ini juga bisa meningkatkan peringkat Blog kita. Soalnya ketika pengunjung Like artikel kita, maka pemberitahuannya akan di publis ke Dinding Facebook secara tidak langsung Blog kita telah dipromosikan di Facebook.. ahh pokoknya banyak banget deh manfaat dari Tombol Like ini.
Yaudah deh gak usah banyak basa basi, berikut cara membuat Tombol Like di Bawah Postingan :

• Seperti biasa masuk ke akun Blogger masing-masing
• Masuk ke menu Rancangan -> Edit HTML
• Beri centang pada kotak "Expand Widgets Templates"
• Carilah kode yang mirip dengan kode dibawah ini supaya gampang carinya pencet CTRL + F:

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

•  Kalo sudah ketemu simpan kode berikut tepat dibawah kode <div class='post-footer-line post-footer-line-1'> 

<iframe allowTranrparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=400&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
</div>

• Langkah terakhir Simpan Template. 

Silahkan lihat hasilnya pada Blog sobat, sekarang sobat sudah memiliki Tombol Like Facebook di Bawah Postingan Blog.

NB : Kalo mau pasang Tombol Like Facebook di Atas Postingan Blog. baca aja disini

Read More

Cara Memasang Radio di Blog

Hayy.. sahabat Blogger yang manis , baik hati dan tidak sombong. (cieee udah kaya gula aja dibilang manis).   Kali ini AA akan membagikan cara menambahkan Radio di Blog , ini sangat memudahkan anda yang gemar mendengarkan radio, jadi sambil ngeblog anda juga bisa dengerin radio.. Tapi kadang widget yang satu ini tidak disukai oleh sebagian orang loh, karena blog tersebut terlihat kurang profesional selain itu kasian bagi temen temen kita (pengunjung) yang koneksinya super keong alias lelet jadi aga sulit mengakses blog kita karena Blog terlalu berat..hehe
yaudah deh apapun alasannya semuanya gak jadi mesalah, karena beda kepala beda juga pendapatnya, ada yang senang dengan widget ini dan ada yang kurang senang. namun untuk kali ini AA akan membagikan Cara Memasang Radio di Blog untuk anda yang membutuhkan widget yang satu ini sekaligus menambah koleksi Artikel di SitusMadu - Manisnya Belajar dan Berbagi..
mari kita simak Cara Memasang Radio di Blog : 

• 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 : 

<iframe scrolling="no" width="1" frameborder="0" src="http://www.seleb.tv/kaskus/genfm.html" height="1"></iframe>

 Jangan Lupa Simpan..
Gimana tuh bikinnya gampang kan.. selamat mencoba semoga berhasil  Memasang Radio di Blog.

[aa]

Read More

Mempercantik Tampilan Entri Populer

Mempercantik Tampilan Entri Populer ya ketika kamu bosan dengan tampilan Entri Populer yang biasa biasa saja , kali ini saya akan berbagi Tutorial Blog mengenai cara Mempercantik Tampilan Entri Populer. jadi nanti kamu akan memiliki tampilan Entri Populer yang Simpel namun cantik dan Elegan seperti gambar di samping atau lebih tepatnya ENTRI POPULER di SitusMadu, sehingga para pengunjung pun semakin betah berlama lama di Blog kita, apalagi kalo Isi dari Blog kita semuanya berkualitas.. wiiss tambah oke tuh..
Langsung saja ini cara Mempercantik Tampilan Entri Populer :

• Seperti Biasa, Anda kudu masuk dulu ke Blog masing masing.
• Pilih Rancangan >> Tambah Gadget >> Pilih Entri Populer.
• Kemudian Save/Simpan

• Setelah itu kamu harus masuk ke menu Edit HTML/Edit Template. 
• Temukan kode berikut ]]></b:skin> 
• Cara cepat carinya tinggal pencet Alt + F
• Setelah ketemu simpan kode di bawah ini tepat di atas kode ]]></b:skin>

.popular-posts ul{padding-left:0px}
.popular-posts ul li{background:#FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px; list-style-type:none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border:1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px}
.popular-posts ul li:hover{border:1px solid #6BB5FF}
.popular-posts ul li a:hover{text-decoration:none}

• Langkah terakhir Simpan template.

Sekarang lihat Blog anda dan gimana hasilnya.. tntunya anda sudah memiliki Entri Populer yang cantik.
Selamat mencoba , terimakasih sudah berkunjung ke SitusMadu - Manisnya Belajar dan Berbagi

Read More

Cara Membuat Daftar Isi dalam Satu Label pada Blog

Membuat Daftar Isi dalam Satu Label
Daftar Isi dalam Satu Label contohnya seperti gambar di atas contoh lebih detailnya ada di bagian atas sidebar sebelah kanan Blog CaraGampang. jadi fungsi dari gadget ini adalah mengkategorikan Artikel berdasarkan label. sehingga pengunjung dapat dengan mudah melihat artikel dengan label tertentu.. oia ini juga dapat meningkatkan Page view blog kita juga loh karena dengan adanya gadget ini pengunjung bisa betah berlama-lama di blog kita apalagi semua artikel dalam satu label tersebut adalah artikel yang sedang dicari atau dipelajari  si pengunjung, sehingga pengunjung tidak pindah ke Blog lain untuk mencari artikel terkait..
okeh, langsung saja ini Cara Membuat  Daftar Isi dalam Satu Label :

Masuk ke akun Blogger anda
Pilih menu Rancangan >> Tambah Gadget >> Pilih HTML/Java Script
Kemudian Tambahkan Script bibawah ini :

<script style="text/javascript">
var numposts = 10;
var standardstyling = true;
</script>


<script type='text/javascript' src='http://caragampangcom.googlecode.com/files/label.js'></script>


<ul>
<script src="http://www.caragampang.com/feeds/posts/default/-/Tutorial%20Blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>

Langkah terakhir tinggal di simpan maka lihat hasilnya

KETERANGAN : 
10 = jumlah artikel yang akan ditampilkan (silahkan ganti dengan yang kamu inginkan).

www.caragampang.com = ganti dengan blog anda

Tutorial blog = Ganti dengan nama label yang akan ditampilkan.

NB : Jika anda ingin menampilkan artikel dalam jumlah banyak saya sarankan untuk menambah Scroll pada gadge ini , untuk tutorialnya silahkan lihat Cara Menambahkan Scroll pada Widget

Selamat mencoba Tutorial Blog yang satu ini Cara Membuat Daftar Isi dalam Satu Label

Read More

Beragam Widget Facebook untuk Mempercantik Blog

Beragam Widget Facebook untuk Mempercantik Blog

Okeh sobat Blogger, kali ini CaraGampang.Com akan berbagi macam macam widget dari facebook untuk mempercantik tampilan Blog sobat semua, pastinya sobat sudah tau kan kalo facebook itu adalah situs Jejaring Sosial terbesar di Dunia, jadi facebook ini sangat berberan penting untuk Blog kita..
daripada dengerin penjelasan saya, yukk langsung aja kita simak macam-macam Widget Facebook untuk Mempercantik Blog :

Likes Badge
Akan menampilakan halaman/page kesukaan anda.

Profil Badge
Menampilkan informasi profil anda di web/blog.

Photo Badge
Foto lencana ini memungkinkan Anda untuk berbagi foto Anda

Likes Box
Hal ini memungkinkan pengguna Anda untuk mempublikasikan konten mereka dan
kegiatan ke Facebook.

Shared Button
Sebuah widget dari facebook yang memungkinkan pengunjung sobat
berbagi konten blog anda di Facebook.

Page Badge
Berbagi halaman Facebook

Twitter Link
Hubungkan halaman Facebook dengan Twitter. Setiap kali Anda
memperbarui halaman Facebook, pengikut twitter Anda akan
diperbarui juga dengan tweet.

likes Button
Memungkinkan pengguna facebook untuk berbagi halaman web dari blog anda
di profil mereka.

Kotak Komentar
Memungkinkan pengunjung blog/web berkomentar pada blo/web anda dengan menggunakan akun Facebook mereka

Rekomendasi
Dapat merekomendasikan blog anda ke pengguna facebook

Live Streaming

Kegiatan Feed

Login Button
Menampilkan tombol login bersama dengan gambar profil
teman facebook yang sudah mendaftar.

Facepile
Menunjukkan gambar profil dari orang-orang yang menyukai blog anda

Pendaftaran
Cara lain bagi pengguna untuk mendaftar untuk situs Anda 

Sudah dulu ya, selamat mencoba Beragam Widget Facebook untuk Mempercantik Blog

Read More

Cara Membuat Kotak Berlangganan Email yang Keren

Cara Membuat kotak Berlangganan Email yang Keren
Salam, dan selamat datang di CaraGampang.Com . Tutorial Blog kali ini saya akan membagikan script Subscribe via Email  alias Berlangganan via Email yang Keren dan Elegan..
Contohnya udah ada di atas, mari langsung aja ke Cara Membuat Berlangganan Email yang Keren :

• Masuk ke Blogger - Rancangan - Elemen halaman - Tambah Gadget
• Pilih HTML/ JavaScript 
• Paste code berikut :

<style>
.mbt-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSCwOS-iYElEGFZYjgJJGqDG_rkhwxv1AtMKM97hmowUMG-bhl6KLtbiSV8sglF_1Z2SMBE1ae73BLSCtelw_7cJdke4isnb4Y_7Ai00ynM76P2x6iwKbLnA-YRSMkImTdoAn6bQpybvy/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; 
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CaraGampangCom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="CaraGampangCom" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

NB : Ganti tulisan CaraGampangCom dengan ID feedburner anda.

Selamat Mencoba Cara Membuat Kotak Berlangganan Email yang Keren

Read More

Cara membuat Tombol Share atau Share Button Blogger

Cara membuat Tombol Share atau Share Button Blogger
Salam, dan selamat datang di CaraGampang.Com.. kali ini saya akan berbagi Tutorial Blog tepatnya Cara membuat tombol Share atau Share button Blogger di Atas postingan dan bisa juga disimpan dibawah postingan.. Sebenarnya banyak sekali situs yang menyediakan gadget ini, namun kita sering terkendala pada penempatan yang kurang strategis, sehingga tampilan blog kita kurang menarik. Oia dalam Sher Button ini juga dilengkapi dengan tombol GOOGLE + sehingga lebih menarik dan bermanfaat..

Yuuk langsung saja kita simak  Cara membuat tombol Share atau Share button Blogger :

• Seperti biasa masuk dulu ke akun Blogger.
• Pilih menu Rancangan > Edit HTML
• Untuk menghindari kerusakan template maka Download Template Lengkap
• Centang Expand Template Widget
• Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada 2 kode tersebut, pakailah kode yang pertama
• Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='@aa_solah' href='http://twitter.com/aa_solah'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</b:if>

• Langkah Terakhir Simpan Template

NB : Untuk blog yang sudah menggunakan fasilitas read more biasanya bukan menggunakan kode
<div class='post-body entry-content'>
melainkan kode di bawah ini
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Selamat mencoba Cara membuat Tombol Share atau Share Button Blogger

Read More

Cara Membuat Menu Pencarian di Blog

Cara Membuat Menu Pencarian di Blog
Assalamualaikum.. hayy sobat, dalam rangka perbaikan BLOG asolah sekarang bagi bagi Tutorial nih, tadi sudah ngebahas tentang Cara membuat Daftar Isi, kali ini asolah sedikit menjelaskan cara membuat menu Pencarian pada blog, contohnya seperti gambar di atas. Menu pencarian ini tak kalah pentingnya dengan Daftar Isi, yakni memudahkan para pengunjung untuk mencari artikel di BLOG kita, yoo langsung aja kita praktek :)

1.Masuk ke blogger 

2. Klik rancangan, kemudian tambah gadget.

3. Pilih HTML/JavaScript4. Kopi dan paste kode ini :

<form action="http://www.caragampang.com/search"method="get"> <input class="textinput" name="q" size="22" type="text"/> <input value="Cari" class="buttonsubmit" name="submit" type="submit"/></form>

 Keterangan :
Ganti tulisan merah dengan alamat blog sobat, kemudian silahkan ganti juga angka 22, itu adalah banyaknya karakter/ukuran, sesuaikan saja dengan sidebar template milik sobat..

Selamat mencoba Cara Membuat Menu Pencarian di Blog

Read More