SDN Karangtinggil

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Tampilkan postingan dengan label shareal. Tampilkan semua postingan
Tampilkan postingan dengan label shareal. Tampilkan semua postingan

Cara Membuat Menu Omni Melayang di Blog

Waktu saya berjalan-jalan di www.sakahayang.com gak sengaja nemuin artikel bagus , yaitu Cara Membuat Menu Omni Melayang di Blog , dimana script ini akan membuat menu seperti melayang atau floating di blog ..
berikut screen shot nya



Dan berikut caranya :

1. Login pada blog sobat
2. Rancangan
3. Tambah Gadget
4. Html / Javascript
5. Copy kode di bawah ini dan pasang di blog sobat

<!--menu-->
<style type="text/css">
#menu1 a {color:#000000;background-color:#FFFFFF;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:#000000;text-decoration:none;}
#menu1 a:hover {color:#000000;background-color:#FFFF99}
#menu1 a:visited {color:#000000;text-decoration:none;}
</style>

<script src="http://sakahayangdotcom.googlecode.com/files/mmenu.js" type="text/javascript"></script>

<script type="text/javascript">
resizereinit=true;
nama_menu = "SAKAHAYANG MENU";
hdingbgcolor = "#6666CC";  //warna bground nama_menu
hdingcolor  = "#FFFFFF";  //warna text nama_menu
barbgcolor = "#CC0000";  //warna bground bar
barcolor = "#FFFFFF"; //warna text

menu[1] = {
id:'menu1',
fontsize:'100%',
linkheight:22,
hdingwidth:210,

menuItems:[ // REQUIRED!!

["Menu1"], //Judul kelompok Menu1
["Item1", "URL1", ""],
["Item2", "URL2",""],
["Item3", "URL3", ""],
["Item4", "URL4", "_new"],
["Menu2", "", ""], //Judul kelompok Menu2
["Item1", "URL1", ""],
["Item2", "URL2",""],
["Item3", "URL3", "", 1, "no"],
["Item4", "URL4", "", 1]

]}; // Jangan dihapus

make_menus();
</script>
<!--eof menu-->
Bagian terakhir adalah bagian pengaturan parameter.

  • Warna sesuaikan dengan template sobat biar matching. Judul kelompok menu Tulis ["judul kelompok"],  atau ["judul kelompok","",""],  jangan lupa setiap satu item atau setelah kurung siku penutup beri tanda koma.
  • Untuk setiap item menu, penulisan  parameter pertama nama item yang akan ditampilkan, dilanjutkan URL nya. Semua parameter harus didalam tanda kutip, boleh kutip tunggal atau kutip ganda. 
  • Bila URL target akan dibuka di halaman (tab) baru pada browser maka parameter ketiga disetting "_new",
  • Bila pada satu bar akan diisi dua item maka settingannya pada parameter ke-4  diisi   angka 1 dan parameter ke-5 diisi "no".   Item ini akan  ditampilkan disebelah kiri pada bar tersebut. Untuk item disebelah kanannya cukup dengan parameter ke-4 saja diisi angka 1.
  • Untuk item menu yang terakhir  setelah  tanda kurung siku penutup  jangan diberi tanda koma.
0

Cara Membuat Tombol Share Di Bawah Posting Blog

Tombol share dalam blog sangat penting untuk meningkatkan pengunjung ke blog kamu. Namun untuk menarik perhatian agar pengunjng blog mau berbagi artikel yan dibaca ke berbagai jejaring sosial, tentunya kamu membutuhkan tombol share yang cukup keren.


1. Login ke blog kamu
2. Pilih Edit HTML > Jangan lupa Centang Expand Widget Template > Cari kode <data:post.body/>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

<style>
/*--------Social Sharing Widget Below Blog Post ------*/
.sharebelow a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSD2DMsRWc00gujAYDUuKknSxjIvM-vJGSDJ8mLxkW3dKEAKbHBSv2dpxuzakYbZYLvK1Tm3KGgHkzGt8B4fK00OzkR9HD-UdAth66puOS_gPGAGEuZncX20FZAB1hONCiXVbdkNxs1SE/s1600/sharebelow.png) no-repeat;
}
.sharebelow  a.googleplus {
background-position: 0px -348px;
}
.sharebelow  a.googleplus:hover {
background-position: 0px -406px;
}
.sharebelow  a.pinterest {
background-position: 0px -464px;
}
.sharebelow  a.pinterest:hover {
background-position: 0px -522px;
}
.sharebelow  a.delicious {
background-position: 0px 0px;
}
.sharebelow  a.delicious:hover {
background-position: 0px -58px;
}
.sharebelow  a.digg {
background-position: 0px -116px;
}
.sharebelow  a.digg:hover {
background-position: 0px -174px;
}
.sharebelow  a.stumbleupon {
background-position: 0px -812px;
}
.sharebelow  a.stumbleupon:hover {
background-position: 0px -870px;
}
.sharebelow  a.technorati {
background-position: 0px -928px;
}
.sharebelow  a.technorati:hover {
background-position: 0px -406px;
}
.sharebelow  a.twitter {
background-position: 0px -928px;
}
.sharebelow  a.twitter:hover {
background-position: 0px -986px;
}
.sharebelow  a.facebook {
background-position: 0px -232px;
}
.sharebelow  a.facebook:hover {
background-position: 0px -290px;
}
.sharebelow  a.reddit {
background-position: 0px -580px;
}
.sharebelow  a.reddit:hover {
background-position: 0px -638px;
}
.sharebelow  a.rss {
background-position: 0px -696px;
}
.sharebelow  a.rss:hover {
background-position: 0px -754px;
}
.shareandbookmark{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:18px;
font-family:sans-serif;
}
</style>
<div class='sharebelow'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="shareandbookmark">
Kindly Bookmark and Share it:</div>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>
</b:if></div>
<div style="clear:both"/>
4. Simpan dan lihat hasilnya.
0

Spinning Social Media Icon Dengan CSS3


Sebelumnya saya juga pernah membahas cara membuat spinning social media icon dengan CSS3 di blog namun yang satu ini berbeda. Disini cara membuatnya dengan bantuan sebauh situs, jadi Anda tinggal masukin Facebook Username, Twitter Username, Feedburner Username dan Google+ id.

Dan yang lebih kerennya lagi saat mouse menyentuh icon, secara otomatis icon tersebut akan berputar.

Untuk membuat nya silahkan klik ini WIDGET GENERATOR (widget generator lateshack)

Nanti ada tiga macam jenis, kamu pilih salah satu saja.

Setelah itu Anda akan disuruh mengisi seperti di bawah ini

Contoh :

Facebook Username : BLAZERBLOG
Twitter Username : blazer_blog
Feedburner Username : blazer_blog
Google + Id : 114849896378202892510

Setelah selesai klik Add to Blogger.
0

Cara Membuat Widget Recent Comment Dengan Avatar Untuk Blog


Blazer Blog, Widget - Kali ini saya akan membahas bagaimana cara membuat widget recent comment dengan avatar untuk blog. Fungsi widget ini akan menampilkan komentar terbaru secara otomatis ditambah avatar, yang dimaksud avatar adalah gambar profil orang yang berkomentar.

Berikut cara membuat widget recent comment dengan avatar

1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML/JavaScript.
3. Copy kode di bawah ini. SCRIPT BY BLOGGERBUGIS


<div style="overflow:auto;width:300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://blazerracing.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=3"></script>
</div>
Sekarang perhatikan baik-baik kode yang berwarna merah.

width:300px; (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%)
numComments (jumlah komentar yang ingin ditampilkan)
avatarSize (ukuran avatar atau gambar profil)
characters (jumlah kata pada komentar yang ingin ditampilkan)
0

Cara Membuat Sliding Share Melayang Di Blog

Sebelumnya saya pernah membahas tentang cara membuat menu share melayang di blog, namun sekarang dengak efek sliding, saat kursor menyentuh nya secara otomatis menu share nya akan terbuka. Dan berikut cara membuatnya.

1. Login ke blog kamu.
2. Pilih Add Gadget > Pilih HTML/JavaScript. Copy kode di bawah ini.

Script By lateshack
<script language="javascript" type="text/javascript">var _10I='==wOpkSZwF2YzV2XoUGchN2cl5WdoUGdpJ3duQnbl1Wdj9GZ7kSMwEzXoQGbph2Qk5WZwBXYuw2TspwOdBzWpcCZhVGangSZtFmTnFGV5J0c05WZtVGbFRXZn5CduVWb1N2bkBSPgw2TsBichZnC7kCTSVlL05WZtV3YvRGK05WZu9Gct92QJJVVlR2bj5WZrcSPsJXdmcyKpIXZyJXZmVmcuQnbl1Wdj9GZoQnbl52bw12bDlkUVVGZvNmbltyJ9YWZyZyJrcyav1zYyNHdld2Pv02bj5icvRXYjNXdmJ2bs1Gdo5SawF2LvoDc0RHanASPgMmcz5SMwEzXKsTKnQHcpJ3YzdCK05WZtVGbFVGdhVmcj5CduVWb1N2bkBSPgEDMx8FIyFmd7cSRzUidpR2LDNTJFNTJ2lGZvM0MlU0MlA3LDNTJFNTJh9yQzUyajFGSwITJ0NXZ0FGTFNTJyITJt92Yus2YhhGdzVGdhxmL3d3dv8SQzUCc0RHayITJENTJmVmcoBjMlE2QzUCMyUyajFGa0NXZ0FGTFNTJyITJCNTJl52buF0MlkXYsB3cpRmMyUCRzUSZslHdzBjMlA3QzUyJ9UGchN2cl9FIyFmd';var _0x362a=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function II1(_0x6ea4x2){var _0x6ea4x3=_0x362a[0];var _0x6ea4x4,_0x6ea4x5,_0x6ea4x6,_0x6ea4x7,_0x6ea4x8,_0x6ea4x9,_0x6ea4xa,_0x6ea4xb,_0x6ea4xc=0,_0x6ea4xd=_0x362a[1];do{_0x6ea4x7=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x8=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x9=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xa=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xb=_0x6ea4x7<<18|_0x6ea4x8<<12|_0x6ea4x9<<6|_0x6ea4xa;_0x6ea4x4=_0x6ea4xb>>16&0xff;_0x6ea4x5=_0x6ea4xb>>8&0xff;_0x6ea4x6=_0x6ea4xb&0xff;if(_0x6ea4x9==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4);} else {if(_0x6ea4xa==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5);} else {_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5,_0x6ea4x6);} ;} ;} while(_0x6ea4xc<_0x6ea4x2[_0x362a[5]]);;return _0x6ea4xd;} ;function OOI(_0x6ea4xf){var _0x6ea4x10=_0x362a[1],_0x6ea4xc=0;for(_0x6ea4xc=_0x6ea4xf[_0x362a[5]]-1;_0x6ea4xc>=0;_0x6ea4xc--){_0x6ea4x10+=_0x6ea4xf[_0x362a[2]](_0x6ea4xc);} ;return _0x6ea4x10;} ;eval(II1(OOI(_10I)));</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function(){jQuery(".latesthack").hover(function(){jQuery(this).stop().animate({left:"0"},"medium")},function(){jQuery(this).stop().animate({left:"-70"},"medium")},500)});
/*]]>*/
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<style type="text/css">
.latesthack {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia48SW4LFO7SfNTHgpDDHt6nj-UD65tyqv9VeOKwjHMQagyPa4jsg7jjnmPR_-66VRn5fYWlIZWpJ2674pGDMXg5HBg4nHnENIO72ap-lfWpjPCeFcVCcrvU1663oGwS1M3xyAcREA2RM/s320/latesthack.com-image.png") no-repeat scroll right top transparent !important;
display: block;float: left;height: auto;
padding: 0 45px 0 0px;
width: 65px;
z-index: 99999;
position:fixed;
left:-70px;
top:20%;
}
.latesthack div {
border:none;
position:relative;
display:block;
}
</style>
<div class="latesthack" style="">
<div>

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" >
<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>
<p style='font-size:8px; font-weight:bold; text-align:center;margin-top:10px;'><a href='http://blazerracing.blogspot.com' >Get This</a></p>
</div>
</div></div>
Simpan dan lihat hasilnya.
0

share bawah

Kindly Bookmark and Share it:

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More