Pages

tombol share dibawah postingan

Posted by Unknown Friday, February 21, 2014


 diatas kode skin

/*addthis_toolbox
----------------------------------------------- */
.addthis_toolbox { width:150px; position:relative; background-color:white;float:right;padding-right:0px;margin-top:-1px;}
.addthis2_toolbox2 { width:150px; position:relative; background-color:darkgreen; padding:10px 15px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }   
.addthis2_toolbox2 .addthis-tooltip ,.addthis_toolbox .addthis-tooltip { display:block; width:140px; padding:10px 15px; position:absolute; bottom:100%; left:30px; z-index:77; margin-bottom:40px; background-color:black; font:bold 12px 'Trebuchet MS',Arial,Sans-Serif; color:white; text-align:center; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; opacity:0; visibility:hidden; -webkit-transition:all 0.26s ease-out; -moz-transition:all 0.26s ease-out; -ms-transition:all 0.26s ease-out; -o-transition:all 0.26s ease-out; transition:all 0.26s ease-out; }  
.addthis2_toolbox2 .addthis-tooltip:before,.addthis_toolbox .addthis-tooltip:before { content:""; width:0px; height:0px; border:7px solid transparent; border-top-color:black; position:absolute; top:100%; left:15px; }  
.addthis2_toolbox2 .addthis-tooltip:before,.addthis_toolbox:hover .addthis-tooltip { visibility:visible; opacity:1; margin-bottom:20px; }


 dibawah data post body
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='background:#fff;border-bottom:1px solid #d0d0d0;padding:10px 0;margin:13px 0px 8px 0px;width:100%;float:left;height:20px;'>
<div style='float:right;padding-right:10px;'>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_preferred_1'/>
    <a class='addthis_button_preferred_2'/>
    <a class='addthis_button_preferred_3'/>
    <a class='addthis_button_preferred_4'/>
    <a class='addthis_button_compact'/>
    <a class='addthis_counter addthis_bubble_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=4rifin' type='text/javascript'/></div>
<div style='float:right;padding:2px 10px 0px 0px;font:normal 12px Arial;color:#666'>
<strong>Share this article</strong> :

</div>
</div>
</b:if>

Selengkapnya...
Serpihan Waktu Labels: 1 comments

tombol menu dan tombol share serta tombol search dibawah header

Posted by Unknown Thursday, February 20, 2014
masukkan kode ini diatas kode skin
 /* Menu Horizontal Bottom
---------------------------------------------*/
.menubottompic {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJFlgiDO_ZzAPBR-8T29u0dykmIYYr_PM0LcV7xS-evqXawuzvltrvO7JiYRMyDNUzkrNn8SKiPNkLdYkONSU87nyWvNZeHHWwUHwP_c3BGeB2VO_5aQUDmVUhyRfujax_Vl0AT3tTVfo/s0/bottommenu.png) repeat-x top left;width:962px;margin:0 auto;padding:0 auto;height:42px;border-bottom:1px solid #A6A6A6;border-top:3px solid #FF8000}
.bottomsearch{width:300px;float:right;margin:0 auto;padding:0 auto;}
.menubottom {width:660px;float:left;height:20px;margin:0 auto;padding:14px 0;}
.menubottom ul {margin: 0;padding-left:0px;color:#fff;list-style-type: none;font:bold 12px Arial,sans-serif;text-shadow:0 1px 0 #000}
.menubottom li{display: inline; margin: 0;}
.menubottom li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqOPUJDkqXhyphenhyphenNDOBorpxUL6PLRXEFOOyUwJERKT_B5KG5jEkmwLDHOLSeVyhTJH8JUSg_hFQUPE9ZHXvPNx4a5rCx-Jq0dQfbr10Uwg3Ph1eUw8rVL27NKy77599n7L7Fy-zVZ7HOeul2/s0/horiz-menu-div.png) no-repeat center right;float: left;display: block;padding:3px 8px;color:#F2F2F2;line-height: 1.2em;}
.menubottom li a:visited{color:#F2F2F2;}
.menubottom li a:hover {color:#FACD49;text-decoration:none;}


 tombol menu dan tombol share serta tombol search dibawah header



<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
<div class='menubottompic'>
<div class='menubottom'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWjWbFhTOkoX0QSnmoW2ovFvzzemEM5PjyYIaUAEYRCD5WccfIuFLNBe70Kr-wC11KqMYRVnaq66hri3Yt-YvJBI1TQRgzdyhFhJqOkpvqoPsYSsBa0jfc1CtEYRb-oquLl_9te9inJCE/s0/home_bg.png' style='padding:0px;'/> Home</a></li>

<li><a href='#' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<div style='float:center;text-align:right;padding:0px;padding-right:50px;margin-top:-3px'>
<a class='toptop' href='http://twitter.com/YOUR_USERNAME'><img alt='Twitter' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEFQ9icopqM0UGYZKjS6iEwysbO_Hap6adM6rZDt54TdDoxkyf9aVYM5o1AXUYOBfKWKWHM_6pdq_AajwEzkhn-VkhSe9QPzVgVgT3qBe7KWHfZloUsX_Ns2M94CVL74s-L-2zUInDGn_y/s0/twitter-icon.png' width='30'/></a>
<a class='toptop' href='http://facebook.com/YOUR_USERNAME'><img alt='Facebook' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIpu0iHp9PBzdqH_FxX4zHxFqf_3W5vXdR7h9ERHRSD7GhL5jdds61Xnfop0rl95EW9cndEbH5cQ28g7h_CQkOGOh0L3fKamQEVNW_A5G-5ETZr3n9Kpjj9Istu4SrWxM7nxLp_6JlTZ/s0/facebook-icon.png' width='30'/></a>
<a class='toptop' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='Feedburner' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMUKYyoplXVl7VsLrqWRK32wA86IQ5iadzV5fiABVDnLHJuxM7JSzpX5BbCOyubV0Xk_zrXEKvufhSugfCT-1sumSzJ9bnLMkI4A1yisFov0gmCyXizjOYN72Kw8RCZZujulj6LYWVheX2/s0/rss-icon.png' width='30'/></a>
<a class='toptop' href='http://plus.google.com/'><img alt='Google +1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzqjsyFA8oas6gOjEb57iCm_kmIBC9WQ_h-1jTKe7OoMxTfYAHLyHI93RlOGjnBX0Py-YKsysRVbwDEFmTHk7zl7VSaAQ6maQWn0tHyH15QbmnlZOlJz8NdeCL3QovoqcSTYYAlcIgbppQ/s0/gplus-icon.png' width='30'/></a>
<a class='toptop' href='link-edit-youtube'><img alt='youtube' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycTA7vMi-PbJ8qeyA_ZTZqZlMXu-qKxh4Rn9JOhKTw3A0p82wmKFAii7nOpa-ZBCKrUAiCQBBExMkkTgdHvzodkQIKnNLwBOURFRRuN8TFHT83TZ3FcXkAQxzoJJSSE5p2ijTXZ9qOwY_/s0/youtube-icon.png' width='30'/></a>
<a class='toptop' href='http://flickr.com/YOUR_USERNAME'><img alt='flickr' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgGcey5gWLRk_8NIUOFlIdUZrIhkX9U-hgEAUBZP8Ri8Q-Y4F2MAWWDXwgKAuGiam64Qiy416_0yx_2subAjZoY8VXFiRx5qywWM3EpuzuXDUGXCRnu9CfhCeUU9-3ccaxuMLyHqOR4XE/s0/flickr-icon.png' width='30'/></a></div>
</ul>
</div>
<div class='bottomsearch'>
<div style='float:right;padding:12px 15px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://creatingwebsite-maskolis.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_2P2-UvBK2TCcUTwDbMwI1P4cjQRETPv1DkkhDCnaD-iEU_7QkoLpiPJtDX5jlSBMrYMFdLAhKRl8X1lkw88PrHtEZQj6CcSCXk7wl735WBl84GQO743gUdHWhCPBb0YO6WSEsITIYfcD/s0/bg_field.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSLLQyWg1noKvebh7pbbscajMoOYspaK4NHl5MEuR4rXHtY9meVuoh4QXEkCchhVVdbFBPfyiRif9NIjOyrimwmXgt6hJmrEJgZgiYI31pSW6pPq-EbMEpdSGgMi-aaTzv309GgBv1IJP/s0/bg_search.gif' type='image' value='Search'/>

</form>
</div>

</div>    
<div style='clear:both;'/>
</div>
Selengkapnya...
Labels: , 0 comments

Membuat Facebook Like Box dan Comment Responsive

Posted by Unknown
Membuat Facebook Like Box dan Comment Responsive

Facebook merupakan social media yang memiliki jumlah pengguna yang sangat banyak. Di Indonesia saja 47% dari pengguna internet memiliki akun facebook. Selain social media facebook juga memberikan banyak tools bagi pengguna blog. Diantaranya fasilita seperti facebook like box, facebook button, facebook comment.
Nah bagi anda pengguna facebook dan juga memasang facebook like box atau pun facebook comment diblog anda mungkin tertarik dengan tips yang satu ini. Tipsnya yang saya berikan ini yaitu bagaimana membuat keduanya menjadi responsive. Hal ini sangat cocok bagi anda pengguna template yang responsive.
Dari hasil pencarian dan percobaan yang saya lakukan saya menemukan dua metode untuk menjadikannya responsive. Yaitu dengan cara menggunakan CSS dan dengan cara jQuery. Nah bagi anda yang tertarik bisa mengikuti cara berikut.

Metode CSS

Metode dengan menggunakan CSS dapat dilakukan dengan menambahkan kode CSS berikut kedalam template blogspot anda:

Facebook Like Box

.fb-like-box, .fb-like-box span, .fb-like-box iframe[style] {
width: 100% !important;
}

Facebook Comment Box

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}

Metode jQuery

Metode yang satu ini terbilang lebih rumit karena harus menggunakan jQuery. Sehingga untuk menerapkannya setidaknya blog anda telah ada jQuery librarynya.
Pada umumnya jika anda membuat facebook like dan juga facebook comment (HTML5) akan ada dua kotak untuk dicopy kodenya.
Kode yang pertama adalah kode javascriptnya atau disebut dengan JavaScript SDK. Kode ini sebaiknya hanya satu kali diletakkan. Dan dianjurkan diletakkan setelah tag <body>. Kalau tidak salah bentuk kodenya seperti ini:
<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=ID Aplikasi Facebook Anda";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Maksud dari kode ini yaitu akan mencari tag script yang pertama dan meletakkan kode script dengan id facebook-jssdk setelahnya. Sehingga kode seperti diatas dapat diganti dengan kode berikut dan meletakkannya setelah tag <body>.
<div id="fb-root"></div>
<script id="facebook-jssdk" src="http://connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=ID Aplikasi Facebook Anda"></script>

Facebook Like Box

Kode yang kedua dari FB like box akan seperti ini:
<div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
Kode diatas adalah tempat dimunculkannya like box. Nilai default like box (profile,stream, dan header muncul). Untuk merubahnya silahkan ganti dengan nilai true diganti dengan false. Misal ingin menghilangkan headernya maka dirubah menjadi data-header="false".
Karena kita akan membuat menjadi responsive maka harus ditambahkan sedikit kode html dan juga jQuery seperti ini.
<div id="container-likefb" style="width:100%;">
  <div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>
<script type="text/javascript">
$(window).bind("load resize", function(){    
  var container_width = $('#container-likefb').width();    
    $('#container-likefb').html('<div class="fb-like-box" ' + 
    'data-href="URL Facebook Page Anda"' +
    ' data-width="' + container_width + '" data-show-faces="true" ' +
    'data-stream="true" data-header="true"></div>');
    FB.XFBML.parse( );    
}); 
</script>

Facebook Comment

Seperti halnya pada like box, pada FB comment bentuk kode keduanya kurang lebih seperti ini (untuk blogger):
<div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10'></div>
Hampir sama yang kita lakukan pada like box, tapi pada fb comment ada sedikit tambahan kode Javascript. Sehingga kodenya akan seperti ini.
<div id="container-commentfb" style="width:100%;">
  <div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10' ></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){   
  var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width();    
    $('#container-commentfb').html('<div class="fb-comments" ' + 
    'data-href="'+url+'"' +
    ' data-width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );    
}); 
//]]>
</script>

Sekian.
Semoga dapat membantu serta dimengerti.
Sukses selalu bagi anda.
Selengkapnya...
Labels: 0 comments

Cara Membuat Wadah Iklan Muncul Tiba - tiba / Membuat Iklan Melayang Di Blog

Posted by Unknown Friday, July 26, 2013


 

Cara Membuat Wadah Iklan Muncul Tiba - tiba  -  Membuat Iklan Melayang Di Blog
Bingungkan?? awalnya aku juga bingung...tapi lama - lama pati sobat mengerti. 
Fungsinya sangat penting sekali terutama blog yang memasang iklan, baik dari adsense google maupun dari kumpul blogger dan sebagainya.
Dengan ditambahkannya JavaScript pada Wadah Iklan ini kita akan dapat mengoptimalkan penghasilan blog melalui adsense atau pay per klik.   
Langkah-langkahn nya sebagai berikut:
             
1. Login ke Blogger
2. Masuk ke "Tata Letak - Elemen Laman"
3. Klik "Tambah Gadget Baru" dengan tipe "HTML/JavaScript"
4. Masukan kode dibawah ini pada bagian konten (tanpa judul gadget):
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}
</style>
<script src="http://ekosusanto.googlecode.com/files/ads_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>

<script src="http://kumpulblogger.com/sca.php?b=168329" type="text/javascript"></script>

<font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://lisaariyansyah.blogspot.com/" target="_blank">widget by arieadie</a>
</div>
1. Width: 350px; ubah angkanya untuk mengatur lebar wadah;  
2. FFFFFF adalah warna background   
3. 1px solid #333333 adalah jenis dan warna border..
 4. Ganti kode yang berwarna merah dengan script iklan milik sobat.
Selengkapnya...
Labels: , , 0 comments

Mendapatkan Iklan dari MadAdsMedia

Posted by Unknown Monday, July 22, 2013

KUMPULAN ADSEN BLOGSPOT - Mendapatkan Iklan dari MadAdsMedia. Anda ingin memasang iklan di dalam blog anda? Tentu itu adalah keinginan kita bukan. Salah satu penyedia iklan dengan sistem CPM telah hadir kehadapan anda. Kita bisa memanfaatkan situs tersebut untuk menambah penghasilan kita.

Mendapatkan Iklan dari MadAdsMedia
Apa itu MadAds Media.
MadAds Media (www.MadAdsMedia.com) adalah jaringan periklanan yang menyediakan penerbit dengan CPM industri tinggi.

Mendapatkan Iklan dari MadAdsMedia

Saat ini MadAds Media Publisher Network sekarang terbuka untuk umum. Silahkan baca disini informasi lengkap mengenai MadAds Media.

Syarat dan Ketentuan
  • Anda tentunya memiliki sebuah blog atau situs.
  • Lakukanlah pendaftaran / registrasi ke situs MadAds Media http://madadsmedia.com/registration/.
  • Dalam waktu 1 - 2 hari, maka pengajuan pendaftaran anda akan dibalas.
Penghasilan Yang di Dapatkan
Untuk saat ini saya belum bisa memberikan gambaran mengenai penghasilan yang kita dapatkan. Karena saya masih baru menggunakannya. Untuk mendapatkan penghasilan hampir sama dengan situs-situs penyedia iklan lainnya. Yang penting mencoba sebagai PUBLISHER iklan.

Beberapa hari yang lalu saya mendaftarkan blog ini, baru hari ini (6 Mei 2013) saya buka email dan disetujui oleh MadAds Media. Langsung deh saya pasang iklannya.

Cara Kerja
Setelah pengajuan / pendaftaran / register anda lakukan, maka anda akan dikirimi email disetujui atau tidak. Bila aplikasi anda disetujui, maka anda bisa langsung memasang iklan yang diberikan berupa script bersamaan dengan email yang dikirim, atau bisa juga anda masuk kembali ke situs MadAds Media dan memilih jenis-jenis iklan yang anda ingin pasang.

Gampang bukan, coba deh untuk Mendapatkan Iklan dari MadAdsMedia, semoga bisa memberikan penghasilan tambahan bagi para blogger sejati. Demikian tulisan singkat di atas, semoga bermanfaat. Salam. [Kumpulan Adsen Blogspot]

undefined

Cara Membuat Banner Keren Blog/Web Sendiri

Sebuah banner fungsinya adalah untuk memberi informasi dengan media visual kepada setiap orang yang melihatnya. Mungkin sebagian orang ada juga yang menggunakan banner dengan fungsi lain seperti alat penggosok gigi dipagi hari atau sebagai alat penggaruk punggung, tapi itu tidaklah penting. Karena sekarang kita akan belajar bagaimana cara membuat banner untuk blog atau website yang unik dan elegan.

Contoh Banner yang sudah jadi bisa diliat DISINI
Artkel lainnya >> Cara Membuat Postingan SEO | Cara Membuat Twitter Box Follower di BLOG | Daftar Kode Warna HTML

1. Buat foto atau gambar dangan menggunakan Photoshop, Corel Draw, Paint dll. Pake sapu lidi juga bisa.
2. Upload image tersebut. Contohnya pake picasaweb.google.com atau yang lainnya. Pokoknya image tersebut harus masuk internet biar keren.
Kemudian simpan baik-baik URL gambarnya, kalo perlu dihapalin tiap hurup URLnya.
3. Copy kode HTML di bawah ini:


Ganti tulisan URL ANDA dengan URL tujuan Anda, bila baner tersebut ada yang klik.
Ganti JUDUL BANNER sekehendak Anda.
Ganti URL GAMBAR BANNER ANDA dengan URL image Anda yang sudah di upload tadi.
Ganti NAMA BLOG/WEB ANDA dengan nama blog/website Anda.

4. Masukan kode tersebut pada sela-sela kehimpitan blog Anda sekalian. Pake HTML/JAVASCRIPT.
Contoh Banner yang sudah jadi bisa diliat DISINI

Selain cara yang menyusahkan dan melelahkan seperti tutorial diatas. Anda juga bisa membuat Banner keren dengan cara yang lain. Tuhan memberikan jalan yang lebih mudah kepada hambanya dengan mengutus orang-orang yang terpilih untuk membuat layanan pembuat BANNER gratis. Silahkan Anda menuju TKPnya :

Contoh Banner yang sudah jadi bisa diliat DISINI

Banner berformat .GIV
http://www.cooltext.com
http://www.loogix.com
http://www.createagif.net
http://gickr.com
http://picasion.com
www.3dtextmaker.com/
www.flamingtext.com/

Banner berformat .FLASH
http://www.flashbannernow.com
http://www.quickbanner.com
http://www.flash-banner-maker-online.com
http://www.123-banner.com
http://bannersabc.com
www.bannersketch.com/
www.bannerfans.com/
www.banner4five.com/
www.effectgenerator.com/
www.flashvortex.com/


Setelah membuat 2 cara sekaligus diatas, sekarang adalah waktunya dimana Anda sendiri yang harus memutuskan. Mau pake cara kuno tapi berkesan dan membanggakan atau mau pake jasa orang lain. Sekian. Terimakasih

Contoh Banner yang sudah jadi bisa diliat DISINI
Artkel lainnya >> Cara Membuat Tombol Share Melayang di BLOG | Cara Membuat Kolom Tukar Link di BLOG | Cara Membuat Recent Post di BLOG - See more at: http://lavonex.blogspot.com/2013/04/cara-membuat-banner-keren-blogweb.html#sthash.6vv2wm0m.dpuf

undefined

Cara Membuat Banner Keren Blog/Web Sendiri

Sebuah banner fungsinya adalah untuk memberi informasi dengan media visual kepada setiap orang yang melihatnya. Mungkin sebagian orang ada juga yang menggunakan banner dengan fungsi lain seperti alat penggosok gigi dipagi hari atau sebagai alat penggaruk punggung, tapi itu tidaklah penting. Karena sekarang kita akan belajar bagaimana cara membuat banner untuk blog atau website yang unik dan elegan.

Contoh Banner yang sudah jadi bisa diliat DISINI
Artkel lainnya >> Cara Membuat Postingan SEO | Cara Membuat Twitter Box Follower di BLOG | Daftar Kode Warna HTML

1. Buat foto atau gambar dangan menggunakan Photoshop, Corel Draw, Paint dll. Pake sapu lidi juga bisa.
2. Upload image tersebut. Contohnya pake picasaweb.google.com atau yang lainnya. Pokoknya image tersebut harus masuk internet biar keren.
Kemudian simpan baik-baik URL gambarnya, kalo perlu dihapalin tiap hurup URLnya.
3. Copy kode HTML di bawah ini:


Ganti tulisan URL ANDA dengan URL tujuan Anda, bila baner tersebut ada yang klik.
Ganti JUDUL BANNER sekehendak Anda.
Ganti URL GAMBAR BANNER ANDA dengan URL image Anda yang sudah di upload tadi.
Ganti NAMA BLOG/WEB ANDA dengan nama blog/website Anda.

4. Masukan kode tersebut pada sela-sela kehimpitan blog Anda sekalian. Pake HTML/JAVASCRIPT.
Contoh Banner yang sudah jadi bisa diliat DISINI

Selain cara yang menyusahkan dan melelahkan seperti tutorial diatas. Anda juga bisa membuat Banner keren dengan cara yang lain. Tuhan memberikan jalan yang lebih mudah kepada hambanya dengan mengutus orang-orang yang terpilih untuk membuat layanan pembuat BANNER gratis. Silahkan Anda menuju TKPnya :

Contoh Banner yang sudah jadi bisa diliat DISINI

Banner berformat .GIV
http://www.cooltext.com
http://www.loogix.com
http://www.createagif.net
http://gickr.com
http://picasion.com
www.3dtextmaker.com/
www.flamingtext.com/

Banner berformat .FLASH
http://www.flashbannernow.com
http://www.quickbanner.com
http://www.flash-banner-maker-online.com
http://www.123-banner.com
http://bannersabc.com
www.bannersketch.com/
www.bannerfans.com/
www.banner4five.com/
www.effectgenerator.com/
www.flashvortex.com/


Setelah membuat 2 cara sekaligus diatas, sekarang adalah waktunya dimana Anda sendiri yang harus memutuskan. Mau pake cara kuno tapi berkesan dan membanggakan atau mau pake jasa orang lain. Sekian. Terimakasih

Contoh Banner yang sudah jadi bisa diliat DISINI
Artkel lainnya >> Cara Membuat Tombol Share Melayang di BLOG | Cara Membuat Kolom Tukar Link di BLOG | Cara Membuat Recent Post di BLOG - See more at: http://lavonex.blogspot.com/2013/04/cara-membuat-banner-keren-blogweb.html#sthash.6vv2wm0m.dpuf
Selengkapnya...
Labels: , 2 comments

Modifikasi Popular Post untuk Template Gallery

Posted by Unknown
Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

popular



Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :
  1. Login ke Blogger dengan akun Anda
  2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
  3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
    .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
    .PopularPosts ul{padding:5px 0}
    .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
    .PopularPosts .item-content{position:relative;float:left;margin:0}
    .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
    .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
    .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
    .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
    Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
  4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
  5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

    popular

    Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
  6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-thumbnail-only'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
  7. Setelah ketemu, ganti dengan kode berikut ini :
    <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
  8. Terakhir, save templates lihat hasilnya.
Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat
Selengkapnya...
Labels: 0 comments

Kumpulan Gambar Emoticon Lucu Onion Head untuk komentar blog

Posted by Unknown
Cara Membuat Emoticon Smiley untuk dipasang di komentar Blog
Hai sobat Uman??? wah semangat neh karena sekarang ada postingan bagus tentang membuat emoticon di komentar blog. :)
Sebelumnya udah tau kan apa itu emoticon? ya, gambar yang menampilkan emosi atau suasana hati seseorang yang ditampilkan di komentar ataupun chatting dsb. hehe
Nah, sudah pada dipasang belum emoticon-nya di blog kamu? kalo belum, berikut akan saya share salah satu emoticon yang bernama Onion Head atau bahasa indo-nya Kepala Bawang. hehe karena emang gambar kartun-nya berbentuk bawang :D

Okey, kita langsung saja ke TKP, cekibroott ...

  • Pertama cari kode <div class='post-footer-line post-footer-line-3'> atau <p class='post-footer-line post-footer-line-3'> di Kode HTML blog kamu, biasanya ada di dekat html bagian lompat ke widget Blog1, kemudian expand dan post nya di-expand juga.  hehe, emang agak sulit untuk edit html di blogger versi  terbaru :D Pokoknya untuk sekarang gitu dulu deh, nanti juga ngerti :p
  • Setelah ketemu kodenya, cari kode berikut dibawahnya:
</div>
</b:inclidable>

  • Kemudian Copy-Paste kode dibawah ini tepat ditengahnya:
- Seperti ini sob:
</div>
disini paste kodenya
</b:inclidable>
  
- Dan ini kodenya yang harus di Copy dan di-Paste di tengah kode diatas:

  • Nah, setelah selesai di-Paste, cari dulu kode </body> Biasanya ada di bagian paling bawah Kode HTML-nya.
  • Setelah ketemu, Copy-Paste kode berikut tepat diatasnya:
  • Langkah terakhir klik Simpan Template. Selesai :)
Jika, langkah-langkah diatas dilakukan dengan benar, sudah pasti hasilnya akan benar pula sesuai yang diharapkan. Terimakasih dan selamat mencoba ya sobat :)
Selengkapnya...
Labels: 2 comments
Subscribe to: Posts (Atom)
 

bloger sejati Copyright © 2008-2009 | Edited By : arieadie