Home / Archived For September 2013

Minggu, 29 September 2013

Cara Membuat Efek Membesar pada Gambar di Blog

Cara Membuat Efek Membesar pada Gambar di Blog

CaraMembuat Efek Membesar pada Gambar di Blog
Salam hangat from saya for Sobat semua, saat ini saya akan berbagi lagi artikel tentang bagaimana Cara Membuat Efek Membesar pada Gambar di Blog. Baiklah dari pada banyak basa basi kesana kemari kita langsung saja ke topic, berikut ini lah langkah-langkahnya…

1. Login ke akun blogger
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu letakan kode berikut ini tepat di bawahnya:
.ow img{

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

5. Simpan Template
6. Untuk menerapkan Efek Membesar ini kita harus menambahkan tag class="ow" pada kode HTML gambar, example nya seperti dibawah ini:

<a class="ow" href="http://twitter.com/@rezky971" ><img border="0" height="177" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhElli-wXYD-DMwrw-bjDvEJPjj6NCMg_Aj7yNh-gl1eSLNOuv5f9Qwsr_AcUuX28x3CIEo8-5w2n264_iqL6Z-uWDTumZHjJ4Kyo82WoFImsUfc_39V88-xDkWCxAQPYbhVUVWPDKrhH25/s320/SEJENAK+MENCOBA.jpg" width="284" /></a>

Cara Menambahkan Button Like, Tweet dan G+1 Melayang di Blog

Cara Menambahkan Button Like, Tweet dan G+1 Melayang di Blog

CaraMenambahkan Button Like, Tweet dan G+1 Melayang di Blog
Salam hangat from saya for Sobat semua, saat ini saya akan berbagi lagi artikel tentang bagaimana CaraMenambahkan Button Like, Tweet dan G+1 Melayang di Blog. Baiklah dari pada banyak basa basi kesana kemari kita langsung saja ke topic, berikut ini lah langkah-langkahnya…

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>


5. Terakhir Simpan dan selesai dech…

Cara Menambahkan Tombol Like, Tweet dan G+1 Dibawah Postingan

Cara Menambahkan Tombol Like, Tweet dan G+1 Dibawah Postingan


CaraMenambahkan Tombol Like, Tweet dan G+1 Dibawah Postingan
Salam hangat from saya for Sobat semua, saat ini saya akan berbagi lagi artikel tentang bagaimana Cara Menambahkan Tombol Like, Tweet dan G+1 Dibawah Postingan. Baiklah dari pada banyak basa basi kesana kemari kita langsung saja ke topic, berikut ini lah langkah-langkahnya…

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Template.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini <div class='post-footer'>
6. Setelah itu letakan kode berikut ini di bawahnya
<!-- Button Share BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' style='float:left;padding:0px;'>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet' tw:related='@rezky971' tw:via='@rezky971'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
</div>
<script src='//s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>
<!-- Button Share END -->

7. Simpan Template bila telah selesai, jangan lupa ganti @rezky971 dengan username twitter sobat.

Cara Memasang Komentar Facebook dan Blogger

Cara Memasang Komentar Facebook dan Blogger


Cara MemasangKomentar Facebook dan Blogger
Salam Sobat semua, saat ini saya akan berbagi lagi artikel tentang bagaimana Cara Memasang Komentar Facebook dan Blogger. Baiklah dari pada banyak basa basi kesana kemari kita langsung saja ke topic, berikut ini lah langkah-langkahnya…

1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode ]]></b:skin>
4. Letakan kode berikut di atas ]]></b:skin>
.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px;cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}

5. Kemudian cari kode </head>
6. Taruh kode berikut di atas kode di atas kode </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='IDfacebook' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();}
</script>

7. Ganti IDfacebook dengan ID facebook sobat (facebook.com/IDfacebook)
8. Kemudian cari kode <div class='comments' id='comments'>
9. Kamu akan menemukan 2 kode yang sama. Letakkan kode di bawah ini tepat di bawah 2 kode <div class='comments' id='comments'>
 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='5' width='450'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>


10. Angka 5 adalah banyaknya komentar yang ditampilkan dan 450 adalah lebar kotak komentar facebook.
11. Simpan Template dan selesai dech … jangan lupa lihat hasilnya.

Cara Membuat Icon Burung Twitter Berterbangan di Blog

Cara Membuat Icon Burung Twitter Berterbangan di Blog

Cara MembuatIcon Burung Twitter Berterbangan di Blog
Salam hangat dari saya untuk Sobat semua, saat ini saya akan berbagi lagi artikel tentang bagaimana  Cara Membuat Icon Burung Twitter Berterbangan diBlog. Baiklah dari pada banyak basa basi kesana kemari kita langsung saja ke topic, berikut ini lah langkah-langkahnya…

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<script type="text/javascript" src="https://sites.google.com/site/exeloph/file/Twitterbang.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSSw8YLnQMFOXTvQ_QOP-5FodT42JpIzztQecBen-ghM1PqadH2LeoDM-yEY05o8uNJ2JQ3h3tW1gl1Q23uTe85u_EI4ApXqptxSIZu2tNjO4Jy8o5VlUcXeDMhWFAh5Xc3zRENXY3va4/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/@rezky971";var tweetThisText = "Twitter - @rezky971 http:// kumpulan-terkini-93.blogspot.com/";tripleflapInit();</script>


5. Ganti http:// kumpulan-terkini-93.blogspot.com/ dengan URL blogmu dan @rezky971 dengan twitter usernamemu.
6. Simpan dan lihat hasilnya…

Cara Memasang Running Teks Berita Tentang Blog Kita

Cara Memasang Running Teks Berita Tentang Blog Kita

Cara Memasang Running Teks Berita Tentang Blog Kita
Salam Sobat semua, saat ini saya akan berbagi lagi artikel tentang bagaimana Cara Memasang Running Teks Berita Tentang Blog Kita. Baiklah dari pada banyak basa basi kesana kemari kita langsung saja ke topic, berikut ini lah langkah-langkahnya…

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<script type="text/javascript">
var hn_url_blog = "http:// kumpulan-terkini-93.blogspot.com/";
var hn_jumlah_post = 10;
var hn_warna_latar = "#000000";
var hn_warna_garis = "#FF0000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = false;
</script>
<script src="http://headlinenews.googlecode.com/files/Headlinenews-MasDhani.js">
</script>


Ganti http:// kumpulan-terkini-93.blogspot.com/  dengan url blog sobat, Selain itu sobat juga bisa mengganti jumlah post, warna latar belakang, warna garis dan posisi sesuai dengan selera sobat.

5. Simpan dan selesai dech.

Cara Membuat Efek Hujan Salju di Blog

Cara Membuat Efek Hujan Salju di Blog

Cara  Membuat Efek Hujan Salju di Blog
Salam Sobat semua, saat ini saya akan berbagi lagi artikel tentang bagaimana Cara  Membuat Efek Hujan Salju di Blog. Baiklah dari pada banyak basa basi kesana kemari kita langsung saja ke topic, berikut ini lah langkah-langkahnya…

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>


5. Simpan dan lihat hasilnya,, sempurna…

CARA MENAMBAHKAN BUTTON SHARE ADDTHIS DI BAWAH POSTINGAN

CARA MENAMBAHKAN BUTTON SHARE ADDTHIS DI BAWAH POSTINGAN

Cara Menambahkan Button Share Addthis Di Bawah Postingan
Salam Sobat semua, saat ini saya akan berbagi lagi artikel tentang bagaimana Cara Menambahkan Button Share AddThis di Bawah Postingan Dan Bagaimana Cara Menambahkan Button Share AddThis di Sidebar. Baiklah dari pada banyak basa basi kesana kemari kita langsung saja ke topic, berikut ini lah langkah-langkahnya…

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini <div class='post-footer'>
6. Setelah itu taruh kde berikut ini di bawahnya
<!-- AddThis Button BEGIN -->
<div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a8b947c53d5c175"></script></div>
<!-- AddThis Button END -->

7. Simpan Template dan lihat lah hasil kerja anda…

Cara Menambahkan Button Share AddThis di Sidebar

1. Pilih Tata Letak kemudian Tambah Gadget
2. Pilih HTML/JavaScript
3. Masukan kode script  diatas tadi.

4. Terakhir Save dan selesai dech

Cara Memasang Box Twitter Follower Di Blog

Cara Memasang Box Twitter Follower Di Blog

Cara Memasang Box Twitter Follower Di Blog
Hai sobat semua, bertemu lagi dengan saya dan tentunya dalam sebuah postingan, saat ini saya akan membagikan post tentang bagaimana caramemasang box twitter follower di blog, langsung saja ikuti langkah-langkah dibawah ini !

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<iframe name="fbfanIFrame_0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=@rezky971" class="FB_SERVER_IFRAME" style="width: 300px; height: 250px; border-style: none;" frameborder="0" scrolling="no"></iframe><script type="text/javascript">fanbox_init("@rezky971");</script>


5. Ganti @rezky971 dengan username twittermu sendiri, dan 300 adalah ukuran lebar serta 250 adalah tingginya.
6. Terakhir Simpan dan lihat hasilnya…

Sabtu, 28 September 2013

CARA MEMBUAT RANDOM POST BERGERAK KEREN

CARA MEMBUAT RANDOM POST BERGERAK KEREN


CARA MEMBUAT RANDOM POST BERGERAK KEREN
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #ecf88a;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:# 9dff33;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/9011035172/ajaxslider.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 10;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>


5. Terakhir Save dan lihat hasilnya… wow kwrennnn

CARA MEMBUAT RANDOM POST DENGAN THUMBNAIL

CARA MEMBUAT RANDOM POST DENGAN THUMBNAIL


Cara Membuat Random Post dengan Thumbnail
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<style>
.rp-post-link {
font-weight: bold !important;
font-size: 120% !important;
}
.rp-summary {
margin-top: 3px !important;
font-size: 100% !important;
line-height: 1.3em !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:65px;height:65px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 180;
var numofpost=5;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"
var pubdate = new Date(entry.published.$t).toDateString();
item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>";
if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>

5. Ok, sebelum sobat simpan gadgetnya ada sedikit catatan yang harus di ubah , diantaranya:
width:65px;height:65px; -->  65 ialah ukuran thumbnail
lengthsummary = 180; --> 180 ialah jumlah karakter isi post
numofpost=5; --> 5  ialah jumlah post yang akan ditampilkan
6. Terakhir Simpan dech.

DAFTAR SEARCH ENGINE TERBAIK

DAFTAR SEARCH ENGINE TERBAIK


DAFTAR SEARCH ENGINE TERBAIK

 Search Engine, tentu saja para sobat semua sudah tau apa yang di namakan search engine, ya search engine adalah mesin pencari yang harus di perhatikan ketika kita menyelami dunia blog.
Memiliki peringkat pertama di halaman pertama search engine tentunya harapan bagi semua blogger, namun sangat lah susah jika tidak di barengi dengan ketekunan dan kesabaran kita dalam mengurus blog.
Baiklah langsung saja saya akan memberikan Daftar Search Engine Terbaik dibawah sini !

Search Engine
Page Rank
Alexa Rank
Google
9/10
1
Baidu
9/10
5
Bing
8/10
16
Soso
7/10
53
Seznam
7/10
379
Exalead
7/10
27,634
Scrub The Web
6/10
3,542
Entireweb
6/10
5,905
Jayde
6/10
7,669
Active Search Results
5/10
2,249
Sonic Run
5/10
15,022
Semager
5/10
47,844
Canadian Content
5/10
101,041
AnazitisiS
5/10
256,250
FyberSearch
4/10
7,462
Secret Search Engine Labs
4/10
7,519
Anoox
4/10
9,581
Websquash
4/10
13,827
Infotiger
4/10
16,976
Claymont
4/10
22,826
Amidalla
4/10
34,426
Boitho
4/10
57,980
TowerSearch
4/10
144,369
Spiffy Search
4/10
147,197
GhetoSearch
3/10
9,552
FeedPlex
3/10
17,018
SentenceSeek
3/10
30,618
AxxaSearch
3/10
30,703
The Lesson Finder
3/10
444,659
Mixcat
0/10
70,656








Rabu, 25 September 2013

CARA MEMBUAT READ MORE PADA BLOG DENGAN THUMBNAIL

CARA MEMBUAT READ MORE PADA BLOG DENGAN THUMBNAIL


 CARA MEMBUAT READ MORE PADA BLOG DENGAN THUMBNAIL
1. Silahkan download template Anda sebelumnya
2. Pergi Ke Blogger> Template> Edit HTML
3. Klik pada "Expand Widget Template" 
4. Kemudian cari kode </head>
5. Letakan kode berikut tepat di atas </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks 
********************************************/
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx = s.join(""); 
}
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; 
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
6. Klik Save Template dan Lihat hasilnya....

Catatan :
Bagi sobat yang sudam memasang read more di blognya, sebaiknya di kembalikan dulu ke semula, Caranya dengan menghapus kode yang berwarna merah dibawah ini !

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Sekian dulu ya sobat semua, semoga menjadi titik temu dari pencarian sobat...

Langganan: Postingan (Atom)