Tips membuat header blog dengan gambar

Membuat header blog dengan gambar- Header pada sebuah situs baik itu berjenis blog atau website di ibaratkan wajah pada manusia. ketika seorang pengunjung yang masuk ke sebuah blog maka yang pertama kali dilihat adalah Header. Oleh karena itu elemen ini merupakan bagian yang cukup penting dari keseluruhan blog. Apabila tampilan header blog anda kurang menarik atau malah terkesan acak-acakan, maka kemungkinan kecil pengunjung akan betah/simpati terhadap blog anda. Tampilan Header para blogger di blogspot bermacam-macam, ada yang menggunakan header...
apa adanya (default), ada juga dengan memakai gambar yang sudah didesign sebelumnya. Itu tergantung selera anda.


Nah, kali ini saya akan membahas bagaimana cara membuat header blog dengan gambar, caranya adalah:
  1. Log in ke blogger > Rancangan> elemen laman
  2. Pada elemen Header klik link EDIT 
  3. Pada jendela konfigurasi Header terdapat row isian untuk: Judul blog, Deskripsi blog, Gambar, dan penempatan gambar 
  4. Isi Judul blog dan deskripsi blog, jangan lupa judul dan deskripsi anda ter muat keyword utama dari blog anda. 
  5. Pada bagian gambar pilih Browse mengupload gambar Header dari komputer anda 
  6. Untuk menghasilkan gambar yang sesuai dengan tampilan template blogger anda aktifkan tanda periksa Susut kan agar sesuai 
  7. Atur lah posisi gambar dengan memilih posisi penempatan sesuai dengan keinginan anda, ada tiga opsi penempatan, yaitu Di balik judul dan keterangan, selain judul dan keterangan, dan Tempatkan keterangan setelah gambar. Karena kali ini kita akan menjadikan gambar diletakkan di depan judul blog dan deskripsi dan tertutup oleh gambar,  maka aktifkan pilihan kepada “selain judul dan keterangan”. 
  8. Selain mengambil gambar pada komputer, anda juga bisa mengambil gambar secara link, dan anda bisa memanfaatkan media hosting save dan share salah satunya adalah: http://imageshack.us/
Demikian cara membuat header blog dengan gambar, semoga dengan gambar yang sudah anda persiapkan sebelumnya menjadikan blog anda tambah menarik dan bikin nyaman bagi pengunjung anda.

Cara membuat kotak share facebook,twitter,dll.. di blogspot

Oke, kembali kebahasan, pada kali ini saya ingin menunjukan kepada anda cara membuat share box untuk blogspot- blogger blog anda, didalamnya terdapar fungsi-fungsi:


  1. official tweet button dengan counter 
  2. oficial Google Buzz dengan counter 
  3. official Stumbleupon button dengan counter 
  4. Blog This! 
  5. Email this! 
  6. Print this! 
  7. Comment count link 
  8. dan terakhir Facebook like button.
bagaimana cukup complete bukan?semuanya dapat diramu jadi satu dan bisa ditambahkan dengan cepat pada blog anda.
tampilannya kira-kira seperti ini nih:

cara membuat share box untuk blogspot- blogger blog adalah sebagai berikut:
  • Log in pada blogger anda 
  • pilih Rancangan --> Edit HTML 
  • Klik "Expand Widget Templates" 
  • Cari kode berikut  <div class='post-header-line-1'/>
  • Copy dan pasang kode share box tepat dibawah kode
Perhatian: jika anda tidah dapat menemukan kode
, anda juga bisa sebelum kode <data:post.body/>

Kode share boxnya adalah:


 <b:if cond='data:blog.pageType == "item"'>


    <style type='text/css'>
    .multisharebox {
     background: none repeat scroll 0 0 #EFEFEF;
     float: right;
     margin: 5px 0px 3px 10px;
     padding: 0 5px 0;
     text-shadow: 0 1px 0 #FFFFFF;
     width: 260px;
     border:4px solid #d8dfea;
    }
    .fb-like-boxtop {
     background: none repeat scroll 0 0 #EDEFF4;
     border: 1px solid #D8DFEA;
     color: #000000;
     float: right;
     font-size: 11px;
     margin: 0 0;
     padding: 5px 10px;
     text-align: left;
     width: 230px;
    }
    .fb-like-boxtop a {
     color: #000000;
     text-decoration:none;
    }
    .fb-like-boxtop a:hover {
     color: #000000;
     text-decoration:underline;
    }
    .fb-like-box {
     background: none repeat scroll 0 0 #EDEFF4;
     border: 1px solid #D8DFEA;
     color: #000000;
     float: right;
     font-size: 11px;
     height: 60px;
     margin: 5px 0;
     overflow: hidden;
     padding: 5px 10px;
     text-align: left;
     width: 230px;
    }
    </style>


    <!-- Perfect Share Box : Created by www.bloggertipandtrick.net  -->
    <div class='multisharebox'>
    <table><tr>
    <td><table><tr>
    <td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
    <b:if cond='data:post.isFirstPost'>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
    </script>
    </b:if></td>
    <td><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></td>
    <td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/>
    <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>
    <td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
    </tr></table></td>
    </tr><tr>
    <td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td>
    </tr><tr>
    <td><div class='fb-like-box'>
    Do you like this post?
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=230&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
    </div></td>
    </tr></table>
    </div>
    <!-- Perfect Share Box : Created by www.bloggertipandtrick.net  -->


    </b:if>
 Setelah terpasang, jangan lupa save pekerjaan anda dan lihat hasilnya.
Demikian cara membuat share box untuk blogspot- blogger blog anda, awali hari-hari  tahun 2012 ini dengan hal2 yang bermanfaat, Happy Blogging..


Trik mudah membuat artikel terkait/related post di blog

Baiklah pada postingan kali ini saya akan share tentang bagaimana Cara membuat Artikel Terkait (Related Post) dengan Scroll Bar dalam postingan Blog atau tepatnya berada di bawah postingan blog. Seberapa penting sih  memasang Artikel terkait di blog ?  pastinya sangat penting !! dengan memasang Artikel Terkait di blog akan lebih memudahkan lagi bagi para visitor blog membaca dan melihat artikel-artikel yang berhubungan dengan artikel yang dibaca.
Dan jika dikreasikan dengan Sroll Bar akan lebih menghemat tempat di blog kita jika isi postingan sudah banyak.
Untuk cara memasangnya silahkan ikuti langkah-langkahnya berikut ini :
1. Login ke akun blog
2. Selanjutnya edit HTML lalu centang Expand Template Widget dan jangan lupa download template untuk berjaga-jaga jika terjadi kesalahan.
3.  Kemudian carilah kode berikut ini (gunakan ctrl+f untuk mempermudah pencarian):

 Jika sudah letakkan kode di bawah ini tepat di bawah kode  yang paling pertama...<data:post.body/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'>
<div class='widget-content'>
<h3>Artikel Terkait Lainnya :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if>


NB:
- Buat yg udah memasang read more otomatis,,pasang kode yg di atas setelah kode  <data:post.body/></b:if>
- Untuk kode yang berwarna hijau silahkan sesuaikan dengan keinginan 
- Untuk kode yang berwarna merah adalah warna background  
5. Simpan dan Lihat hasilnya
Selamat Mencoba dan semoga bermanfaat . . .

Cara gampang bikin efek daun berjatuhan di blogspot

Cara Membuat Efek Daun Berjatuhan Di BlogEfek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.
Cara Membuat Efek Daun Berjatuhan :
1.       Seperti biasa login dulu ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript)
3.       Cari kode  pada template dengan menggunakan Ctrl+F.
4.       Copy kode javascript dibawah ini dan pastekan di gadged..

<script src='http://arti.master.irhamna.googlepages.com/daun.js' type='text/javascript'> </script>

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he he...

SEMOGA BERHASIL....

Cara membuat efek salju di BLOG

Dari sekian banyak efek-efek pada blog, efek salju di blog merupakan salah satu yang paling diminati para blogger, selain loading yang cepat juga efeknya menyebar keseluruh ruang blog, tampilan blog pun lebih menarik dari sebelumnya. Tapi karena warna salju adalah putih mungkin tidak cocok bagi anda yang mempunyai background blog yang berwarna putih, tentu saja efek salju tidak akan kelihatan dengan sempurna.
Paling cocok bagi anda yang mempunyai background yang gelap, efek salju pun terasa maksimal. Bagaimana bagaimana dengan weblog anda? Mau efek ini?

Berikut ini adalah cara membuat efek hujan salju di blog:
  • Login ke dashboard blogger anda. 
  • Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript). 
  • Copy script efek hujan salju dibawah ini  dan paste pada gadget
    <script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>
  • Jangan lupa save ya…
Selain efek salju masih banyak efek-efek lainnya yang bisa anda terapkan dalam blog salah satunya adalah efek daun berjatuhan, efek bintang bertaburan pada kursor dengan pilihan warna yang berbeda, InsyaAllah dalam waktu dekat saya akan buat tutorialnya.
Demikian cara membuat efek salju di blog, semoga berhasil.

Cara Membuat Kursor Animasi Teks pada Blogspot

 
Membuat kursor dengan animasi pada blog dapat dilakukan Java Script dengan mudah, maka dari itu pada blogger silahkan ikutilah langkah membuat kursor animasi dibawah ini.

  • Login ke Dasboard blogger kamu --> Layout --> Elemen Halaman
  • Tambah Gadget dan pilih "HTML/Java Script"
  • Copy kode dibawah ini dan simpan.... 
 <script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='MASUKKAN TEKS MU DISINI...';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

Rubah tulisan "MASUKKAN TEKS MU DISINI..." dengan apa yang kamu suka....
Okeey,,semoga berhasil sob!!!!!!!!
Flying Bee
Copyright © 2010 ringan_ringan "BISATY" All rights reserved.
Wordpress Theme by BISATY.WORDPRESS.COM . Pancang Malewa THEME by PANCANG MALEWA