Share-Tuts | Share Segala Hal yang Diketahui

Recent Comments Styles Message Windows 8

Recent Comments Styles Message Windows 8
Hai sobat dah lama nih kagak update post yah, terakhir bulan mei tanggal 2 kalo ngga salah ingat ane.
Nah pada post kali ini ane update tutorial cara buat Recent Comments Styles Message Windows 8. Tutor ini ane dapat dari sobat Tempat Blogging si empunya Mas-Basir.

Oke langsung aja yah ikutin tutorial yg ane buatin :).

Step 1 : Tambahkan kode dibawah ini sebelum kode ]]></b:skin>

#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}

Step 2 : Buat 1 widget HTML / JavaScript dan masukkan kode dibawah ini didalamnya

<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQqID4N1oVShq1SAKSym95x-fKTh2v7DSyuL6TTN9a6rdq4RsMgJeqYMy4G4jOsUMw3HTQ_xzO5jtfWgdtFiw3LNROLORS1yPQS5CU-Rfsravv-nM4OCJVbsGp8As873Beq1GegXILP0/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>
Setelah selesai tekan Simpan. Sekian tutorial dari Share-Tuts.

Sumber : http://mas-basir.blogspot.co.uk/2013/06/widget-recent-comments-dengan-gaya.html#.UdNTS23LmE8
Posted by: Share-Tuts
Share-Tuts, Updated at: 19.18

Cara Membuat Breadcrumbs Diatas Postingan Blog

Cara Membuat Breadcrumbs Diatas Postingan Blog
Cara Membuat Breadcrumbs Diatas Postingan Blog ini bisa dibilang dapat membuat template blog yang kita pakai agar lebih SEO Friendly loh sobat. Selain itu fungsinya banyak salah satunya bisa dapat membuat pengunjung lebih mudah melihat navigasi postingan yang kita buat diblog. Yah walaupun cuman sedikit aja gunanya tapi membuat breadcrumbs diatas postingan blog ini bisa juga untuk ngerapihin blog ataupun menghias blog agar lebih indah.

Sobat tertarik untuk mencobanya tunggu apalagi sob silahkan ikuti tutorial yang share-tuts buat ini.

1. Log-in ke akun blogger sobat dulu.
2. Klik Rancangan > Edit HTML > Klik Download template lengkap dulu sebelum merubah template aslinya agar sewaktu - waktu ada kesalahan kita dapat memperbaikinya.
3. Letakkan kode berikut diatas kode ]]></b:skin>. (gunakan CTRL + F untuk dapat mencari lebih mudah)
.breadcrumbs {
padding: 5px 5px 5px 0;
margin:0;
font-size:90%;
line-height:1.4em;
border-bottom:1px solid black; }
5. Sobat cari kode seperti ini.
<b:includable id='post' var='post'>
6. Pastekan kode berikut ini tepat dibawahnya.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
You are Here &gt; <a expr:href='data:blog.homepageUrl'>Home</a> &gt;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &gt; <data:post.title/>
</div>
</b:if>
</b:if>
7. Simpan template dan coba buka postingan sobat apakah sudah ada breadcrumbsnya diatas postingan. Kalau sudah ada selamat sobat baru saja membuat breadcrumbs navigasi diatas postingan blog.

sumber : http://www.christiantatelu.blogspot.com/2012/02/cara-membuat-memasang-navigasi.html
Posted by: Share-Tuts
Share-Tuts, Updated at: 11.54

Membuat Slide to Unlock diBlog

Membuat Slide to Unlock diBlog

Halo sobat Share-Tuts kembali lagi nih dengan Admin yang super ganteng yang bisa bikin kalian semua ketawa terbahak - bahak =)). Sobat pasti taukan "Slide to Unlock" seperti diBlackBerry dan juga IPhone. Nah disini Share-Tuts akan memerikan tutorial kepada sobat semua tentang Membuat Slide to Unlock diBlog. Untuk demo sobat bisa melihat Disini

Berikut tutorial pembuatannya :

1. Sobat login ke Blogger
2, Pilih Template
3. Pilih lagi Edit HTML
4. Centang Expand Template Widget
5. Lalu sobat cari kode ]]></b:skin>
6. Setelah ketemu letakan kode dibawah ini diatas kode ]]></b:skin>
#well {
padding: 140px 20px 20px 300px;
background:#000;
overflow: hidden; 
width:100%;height:100%;
position:fixed;
z-index:9999999999999999;
-webkit-user-select: none;
font-family: 'Open Sans', sans-serif;
}

#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F); 
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F)); 
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpu-T47u-O0Jg3idzhDN1Qlx2mskt4_WjWHyNQqDjxozk3RNXL-xr7X8UHTxbliHhhQF76TQoXMXCTCaTCOvWN_uOyYdzxXGG_zh4344lDov1_Qlohl0htjnZIJfQuXNGs1dTi-thnmY/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
opacity:0.8;
}
#slider:hover {opacity:1;}

@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}

.bgslide {background:#000;width: 722px;
border-radius: 15px;}
7. Lalu letakan lagi kode HTML dibawah ini, didalam/dibawah kode <body>
<div id='well'>
<div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>
8. letakan lagi jquery dibwah ini, diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'/>
<script src='http://css-tricks.com/examples/SlideToUnlock/js/slidetounlock.js'/>
8. Setelah selesai semua kode dimasukkan seperti yang Share-Tuts ajarkan pilihlah Simpan Template.kalau sobat masih ragu sobat bisa mencoba klik Pratinjau terlebih dahulu untuk mengetahui apa cara yang Share-Tuts beri ini berhasil atau tidak.

Ingin tau lebih detailnya silahkan ke sumbernya Klik Disini.

Selesai sudah tutorial Membuat Slide to Unlock diBlog. Semoga sobat berhasil mempraktekkannya.

Source : http://djogzs.blogspot.com
Posted by: Share-Tuts
Share-Tuts, Updated at: 22.41

Daftar Isi 12

    Loading...

    Posted by: Share-Tuts
    Share-Tuts, Updated at: 19.54

    Macam - Macam Style CBOX

    Siapa sih yang tidak tau namanya CBOX ? Pasti sobat semua terutama sobat blogger pasti tau dengan cbox. Yups, cbox semacam tool atau widget yang membantu para blogger untuk berkomunikasi dalam blogwalking dari blog sendiri keblog lainnya para sobat blogger.

    Nah disiniShare-Tutsmau memberikan macam - macam style tulisan cbox. Berikut dibawah ini adalahmacam - macam style tulisan cboxyangShare-Tutsberikan.

    Bold
    [b]message[/b]
    message

    Italic
    [i]message[/i]
    message

    Underline
    [u]message[/u]
    message

    Marquee
    [scroll]message[/scroll]
    message

    Hyperlink
    [url=LINK]message[/url]
    message

    Email
    [email=Your-Email]message[/email]
    message

    Center
    [center]message[/center]
    message

    Sub
    H[sub]2[/sub]O
    H2O

    Sup
    CO[sup]2[/sup]
    CO2

    Small
    [small]message[/small]
    message

    Big
    [big]message[/big]
    message

    Break
    Break the line
    [br]


    Striketthrough
    [s]teks[/s]
    Striketrhough

    Color Code
    [color=red] [/color]
    [color=blue] [/color]
    [color=green] [/color]
    [color=yellow] [/color]
    [color=pink] [/color]
    [color=purple] [/color]
    [color=brown] [/color]
    [color=bronze] [/color]
    [color=orange] [/color]
    [color=black] [/color]
    [color=gold] [/color]
    [color=silver] [/color]
    [color=violet] [/color]

    Nah cukup segitu sajamacam - macam style tulisan cboxyangShare-Tutsberikan.

    Source : p-cbn.blogspot.com
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 12.50

    Membuat URL, Forum Link, HTML Code Otomatis Disetiap Postingan

    Kembali lagi nih dengan Share-Tuts salah satu blog yang membagikan segala sesuatu yang diketahui :P...hihih. Disini Share-Tuts coba buat tutorial untuk sobat semua tutorial tersebut ialah Membuat URL, Forum Link, HTML Code Otomatis Disetiap Postingan seperti yang ada diforum - forum biasanya, pernah nangkring ke forum ngga sobat kalau pernah biasanya sobat pasti melihat seperti yang Share-Tuts maksud.

    Demo :

    Apabila artikel ini berguna, silahkan sobat share. Jangan lupa untuk menyertakan sumbernya





    Gimana sobat naksir ngga tuh buat kek gitu diblog sobat :D. Kalau sobat tertarik langsung ikutin cara dibawah :

    1. Login ke Blogger > Template > Edit HTML > Centang Expand Template Widget
    2. Cari kode masukkan kode dibawah ini diantara kode <head> dan </head>
    <style type="text/css">
    .about-article{
    background-color:#f9f9f9;
    padding-bottom:5px;
    padding-left:20px;
    font-size:11px;
    }
    .about-article input{
    background-color:#ffffff;
    }
    </style>
    
    3. Copy kode dibawah ini dan simpan di bawah <data:post.body/> atau <div class='post-footer'>
    <b:if cond='data:blog.pageType == "item"'>
    <div class="about-article"><p>
    Apabila artikel ini berguna, silahkan sobat share. Jangan lupa untuk menyertakan sumbernya</p>
    <p class="noborder"><label for="aa-url">URL:</label><br /><input size="95" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-url" value="<data:post.url/>" /></p><p><label for="aa-forum">HTML Link:</label><br /><input size="95" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="<a href=&quot;<data:post.url/>&quot;><data:post.title/></a>" /></p><p>
    <label for="aa-forum">Forum Link:</label><br />
    <input size="95" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="[url=<data:post.url/>]<data:post.title/>[/url]" /></p>
    <p align='center'>
    <a href='http://share-tuts.blogspot.com/2012/11/membuat-url-forum-link-html-code.html' style='display:none;' target='_blank'>Share-Tuts | Share Segala Hal yang Diketahui</a></p>
    </div>
    </b:if>
    NB : ubahlah kode yang berwarna Kuning dengan kata - kata sobat
    4. Simpan Templatenya lalu coba cek dibawah postingan sobat.

    NB : kalau tidak bisa disimpan diconvert dulu tuh codenya disini Pharse HTML

    Sekian dulu tutorial dari Share-Tuts. Terimakasih
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 15.24

    Cara Meletakkan Iklan Di Setiap Akhir Postingan Artikel


    Hari ini Share-Tuts akan memposting mengenai cara menaruh iklan di akhir / di bawah artikel setiap postingan

    Ada terdapat banyak cara, diantaranya :
    1. Dengan mengunakan iklan float ads
    2. Dengan menaruhnya di widget yang diletakan di bawah postingan
    3. Dengan menaruh kode iklan di pengaturan » format
    4. Dengan menyisipkan kode iklan di edit template

    Tapi yang akan Share-Tuts bahas adalah yang di nomer 1. sebab dari nomer 2-4 Share-Tuts yakin sobat pasti bisa!
    Kita mulai saja yuk!
    1. Login ke blogger » Pilih Rancangan » Tambah Widget dibawah Widget Posting bukan disidebar » Pilih HTML/Javascript »
    2. Silakan copy kode di bawah ini dan pastekan di tempat HTML/Javascript
    <center>
    <div style="background:#transparent; border-bottom: 0px #f2f2f2 solid; border-top: 0px #ccc solid; bottom: 0; color: white; font-size: 0px; height: 100px; left: 0; padding: 0px; position: fixed; text-align: center; width: 100%; z-index: 1001;">
    Simpan Kode Iklan Anda Di sini
    </div>
    </center>
    3. Kode yang diwarnai dengan warna merah diganti dengan kode iklan sobat.
    4. Save Template / Simpan Template.

    Selamat mencoba sobat Share-Tuts.

    Source : kucoba.com
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 14.55

    Cara Membuat Widget SMS Gratis di Blog

    Share-Tuts kali ini akan membuat sebuah tutorial tentang Membuat Widget SMS Pada Blog mungkin sobat ada yang kepengen meletakkan ini diblognya masing - masing agar bisa kirim sms lewat blognya dan ngga perlu ribet buka web orang lagi :P.

    Oke berikut tutorialnya Share-Tuts buat ikutin yah, bagi yang kepengen aja ikutin :P
    1. Pertama ya jelas login dulu ke Blog atau Web sobat
    2. Copykan code dibawah ini ke Notepad :
    <iframe frameborder="0" height="264" name="I2" scrolling="no" src="http://sms-online.web.id/widget" style="border: 1px solid rgb(255, 255, 255);" width="84%"> not support</iframe>
    <small><center>
    <a href="http://share-tuts.blogspot.com/2012/11/cara-membuat-widget-sms-gratis-di-blog.html" rel="nofollow">Make Widget</a></center>
    </small>
    3. Pilih Tata Letak > lalu pilih Tambah Widget Baru > pilih lagi HTML/JavaScript.
    4. Setelah sobat pilih HTML/JavaScript tadi lalu sobat masukkan code yang sobat copykan ke notepad tadi.
    5. Klik Simpan/Save

    Sekarang blog sobat sudah tersedia Widget SMS. Selamat melakukan sms gratis diblog sendiri ^_^.

    Source : Kucoba.com
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 14.54

    Cara Buat Widget Page Navigation Cantik untuk Blogger


    Hmm cape juga nih abis nulis beberapa artikel baik tutorial dan lain semacamnya, tapi demi memberikan pengetahuan yang banyak kepada sobat agar bisa belajar dan mengajar kepada yang lain. Jadi, Share-Tuts akan terus bersemangat dalam memajukan blog dan terus memberikan pengetahuan kepada sobat semua.

    Kali ini Share-Tuts akan membuat artikel tutorial tentang Cara Buat Widget Page Navigation Cantik untuk Blogger. Sobat tau ngga apa itu Page Navigation, pasti tau dong yah para sobat blogger dengan yang namanya Page Navigation. Berikut cara atau langkah - langkah membuatnya.

    1. Login ke Blogger
    2. Pilih Rancangan atau Template (dalam halaman blogger yang baru)
    3. Pilih Edit HTML
    4. Cari kode yang seperti 'data:label.url' dengan cara tekan CTRL+F atau tekan F3 pada keyboard. Setelah dapat ubahlah kode tadi dengan kode dibawah ini :
    'data:label.url + "?&max-results=6"'
    NB : ubahlah kode yang berwarna merah jika sobat ingin menampilkan postingan sebanyak yang sobat mau.
    5. Setelah kode tadi dimasukkan dan dirubah cari lagi kode </body> setelah dapat masukkan kode dibawah ini diatas kode </body> :
    <script type='text/javascript'>
    var pageCount=6;
    var displayPageNum=6;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    NB : var pageCount artinya untuk memberikan seberapa banyak hitungan halaman yang dimasukkan. sedang kan var displayPageNum artinya seberapa banyak jumlah navigasi yang ingin sobat tampilkan.

    Kalau sobat merasa Page Navigasinya biasa aja sobat bisa mengubahnya dengan lebih bagus seperti dibawah ini :


    Navigasi Halaman Blogger Cantik – Lite Gray
    stylish blogger pagenavi - Lite Gray
    Navigasi Halaman Blogger Cantik – Black Mamba
    stylish blogger pagenavi - Black Mamba
    Navigasi Halaman Blogger Cantik – Dark Blue
    stylish blogger pagenavi - Dark Blue
    Navigasi Halaman Blogger Cantik – Sweet Orange
    stylish blogger pagenavi - Sweet Orange
    Navigasi Halaman Blogger Cantik – Shadowed Green Ruby
    stylish blogger pagenavi - Green Ruby

    Setelah didownload kode tadi lalu masukkan kode yang didownload keatas Download Code </body> seperti tadi kita masukkan sebelumnya. Gimana sobat tertarik membuat Page Navigation seperti ini.

    Source : finderonly.net
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 14.53

    9 Style Kumpulan Daftar Isi Share-Tuts


    Halo sobat Share-Tuts kali ini Share-Tuts ingin memperkenalkan sobat beberapa Style Daftar Isi bisa dipastikan 9 Style Daftar Isi sih hehe...untuk melihat Style Daftar Isi tersebut silahkan sobat buka halaman apa saja tapi yang pastinnya Style Daftar Isi ini berada diNavbar Breadcrumbs yg berada diatas. Silahkan melihat - lihat stylenya sobat itu semua hasil dari googling ane sana - sini.

    Update : Sekarang ada update baru Style Daftar Isinya ditambah 1 lagi jadi 9 Style Daftar Isi
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 20.04

    Buat Iklan Di Samping Postingan Blogspot


    Cara pasang iklan di samping postingan blog. Merupakan suatu cara dalam meningkatkan jumlah klik dari iklan ppc. Trik ini banyak diterapkan oleh para blogger-blogger kelas dunia dalam memaksimalkan adsense. lalu pertanyaannya mengapa Share-Tuts sendiri tidak menerapkannya? tentu saja Share-Tuts pun menerapkannya hanya saja dulu kalau sekarang tidak karena tidak enak dilihat dibeberapa konten blog di situs Share-Tuts ini. Namun bagi sobat yang menginginkan iklan adsense atau ppc terpasang di dalam posting tepatnya di samping kiri atau kanan, Share-Tuts akan bahas triknya.

    1. Login ke Blogger » Klik Rancangan » Pilih Edit HTML » centang Expend Widget
    2. Silakan cari kode
    <data:post.body/>
    3. Setelah ketemu pastekan kode berikut sebelum kode tadi <data:post.body/>
    <div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'>
    <--Simpan Kode Iklan Disini--></div>

    4. Sehingga hasilnya menjadi seperti ini :
    <div class='post-body entry-content'>
    <div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'>
    <--Simpan Kode Iklan Disini--></div>
    <data:post.body/>

    Cara Untuk Menapilkan Iklan Di Pinggir Posting.
    1. Copy dulu kode iklan yang sobat dapatkan, kemudian Parse dengan Tool ini Parse HTML
    2. Setelah kode iklan di parse, hapus kode merah <--Simpan Kode Iklan Disini--> kemudian ganti dengan kode iklan sobat yang telah di Parse.

    Terakhir simpan template dan lihat hasilnya.

    Catatan Penting!
    -  Kode warna hijau adalah ukuran dari untuk banner sobat
    -  Kode float: left; artinya iklan dimulai dari disamping kiri postingan blog, sedangkan bila di ubah jadi right artinya iklan dimulai dari samping kanan artikel.

    Source : Kucoba.com
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 23.54

    Cara Membuat Like Box Lebih Ringan


    Kira-kira ada yang sudah punya widget ini belum ya, kalo belum bikin dulu sana " FANS PAGE " bagi yang belum punya fans page facebook, kalo sudah ya disini " LIKE BOX " .
    Widget yang bikin blog super lambat loadingnya ini yang kadang kadang bikin sobat/pengunjung males ngebukanya. Meskipun hanya berupa tombol kecil yang pernah Share-Tuts pake sebelum ganti template, tapi cukup untuk membuat loading blog Share-Tuts lambat.

    Ikutin Step by Stepnya jika sobat ingin membuat likebox lebih ringan :

    - Masuk ke Facebook Developers.
    - Bikin LikeBoxnya pake fanspage mu bukan punya saya.
    - Setelah selesai utak atik klik " Get Code "
    - Setelah dibikin lihat gambar dibawah :
    Contoh Kode :
    <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FLimit-Post%2F271795519603025&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe>

    - Nah, Ambil kode yang sudah Share-Tuts tandai itu, tapi jangan kode yang diatas kode itu punya LimitPost.
    - Copy lalu simpan ke notepad sobat.

    Next :
    - Masuk ke template sobat lalu cari kode ini   </body>
    - Masukan Javasript dibawah ini diatas kode tadi :

    <script type="text/javascript">
    //<![CDATA[
    window.onload = function() {
        function createIframe(src, w, h, frID) {
            var i         = document.createElement("iframe");
            i.src         = src;
            i.scrolling   = "auto";
            i.frameborder = "0";
            i.width       = w;
            i.height      = h;
            document.getElementById(frID).appendChild(i);
        }
    
        // Definisikan dimensi, URL iframe dan tempat sasaran muat iframe di sini...
        createIframe("URL-Iframe", "Lebar Iframe", "Tinggi Iframe", "ID Kontainer");
    
    }
    //]]>
    </script>

    - Lalu cari lagi ini   ]]></b:skin>
    - Masukan CSS-nya diatas kode tadi :

    /* Iframe Preloader */
    .framePreloader iframe {
      background-color:white;
      border:none !important;  
      display:block;
      margin:0px auto;
    }
    - masih belum selesai sob. cari kode yang di </body> tadi :
    createIframe("URL-Iframe", "Lebar Iframe", "Tinggi Iframe", "ID Kontainer")
    - Masukan kode yang disimpan ke notepad tadi kedalam kode createIframe, lalu hasilnya akan jadi seperti ini :
    createIframe("http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true", "292px", "290px", "framePreloader1");

    - INGAT !, kode sobat sendiri bukan kode yang diatas.
    - Jika sudah simpan template sobat.

    Pemasangan :
    - Langkah terakhir adalah memasang widgetnya.
    - Bikinlah widget baru, pilih yang HTML/Javasript.
    - Lalu masukan kode like box sobat yang keseluruhan bukan kode-kode yang diatas ( kode pada gambar no.2 ).
    - Jangan lupa sisipkan kode berikut ini pada widget like box nya :
    <div class="framePreloader" id="framePreloader1"></div>
    - Hasilnya yang mungkin akan jadi seperti ini :
    <div class="framePreloader" id="framePreloader1"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FLimit-Post%2F271795519603025&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe></div>

    - Jika sudah simpan widgetnya.
    - Lalu simpan lagi.

    Gimana cukup rumit yah sobat cara - caranya ntar deh klau ada cara yang lebih gampang akan Share-Tuts update :).

    Source : http://limitpost.blogspot.com
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 23.38

    Mengenal Kode Elemen / Widget pada Layout Blogger

    Halo sobat Share-Tuts kali ini Share-Tuts akan share tentang Mengenal Kode Elemen / Widget pada Layout Blogger sobat blogger pasti tau kan apa itu sebuah widget tapi terkadang sobat belum kenal dengan artian dari widget tersebut. Nah pada kali ini Share-Tuts akan memberikan pengetahuan tentang kode elemen sebuat widget pada layout blogger.

    Coba cari kode seperti dibawah ini :
    <b:section id='header' class='header' maxwidgets="1" showaddelement="no">
    </ B: section>

    Berikut adalah yang di sering sobat temui di tag < B: section> kode pengemas widget.


    • id : Ini diperlukan untuk mengetahui posisi widget sebagai apa, misalnya 'header,' 'sidebar' bisa sobat nama'i sesuka sobat, ini juga merupakan selektor '#header' jadi sobat bisa berkreasi di selektor '#header' dengan CSS.  
    • class : Ini boleh ada boleh tidak, ini juga hampir sama pada 'id' memudahkan untuk mentrafer widget jika berganti template, 'navbar,' 'header,' 'main,' 'sidebar,' dan 'footer.' dll. Bisa juga dinama'i sesuka sobat, ini juga merupakan selektor misalnya '.header' jadi sobat bisa berkreasi di selektor '.header' dengan CSS.  
    • maxwidgets : kode ini boleh ada boleh tidak, ini merupakan peritah berapa batas maximal sobat bisa menambahakn widget, misalnya maxwidgets="1" jadi widget yang bisa ditambahkan cuman satu saja.  
    • showaddelement : kode ini boleh ada boleh tidak, ini berfungsi untuk menmapilakan pada halam editing layout menampilkan link 'Add a Page Element' / 'Tambah Widget' . jadi sobat bisa memasukan voulenya dengan 'yes atau 'no' saja.  
    • growth : boleh ada boleh tidak, ini kode berfungsi untuk menentukan apakah widget di tumpuk atau side by side. Bisa disikan dengan volue 'horizontal' atau 'vertical,' aslinya 'vertikal'.  
    • b:section : ini adalah kode pembuka dan penutup jadi hukumnya wajib ada. 


    Kemudian setelah kode diatas adalah kode widget berada didalam tag b:section :
    <b:widget id="header" type='HeaderView' locked="yes"/>
    
    <b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
    
    <b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>


    • id - diperlukan, jika ingin mengubah nama ID widget sobat harus mengahapus terlebih dahulu widgetnya dan buat yang baru. 
    • type - diperlukan, ini menunjukkan jenis (type) widget. Contoh jenis-jenis widget : BlogArchive, Blog Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar
    • locked - boleh ada boleh tidak, voulenya dengan 'yes atau 'no' saja. Ini berfungsi untuk menentukan pakah widget dapat dipindah dan dihapus pada editing layout, di page element. title - boleh ada boleh tidak, jika tidak digunakan maka sebagi defaoultnya, contoh misalnya 'label1'. 
    • pageType - boleh ada boleh tidak, voulenya bisa diisi 'all,' 'archive,' 'main,' or 'item,' kalau aslinya 'all' karena ini berfungsi untuk menampilakan dimana widget akan tampil pada halaman blog seperti kondisional tag. 
    • mobile - boleh ada boleh tidak, voulenya dengan 'yes,' 'no,' ‘only’ atau 'default' as the default. Ini fungsinya pakah widget akan ditampilkan pada tampilan mobile atau tidak. 
    NB : Dalam blog sobat saat dipublikasikan, semua tag <b:section> dan <b:widget> akan diganti dengan tag <div>, yang akan memiliki ID tertentu. Jadi, sobat dipersilahkan memodifikasi CSS nya, misalnya, div#header atau div#myList di CSS sobat jika sobat menginginkannya. Seperti yang Share-Tuts jelaskan di beberapa penjelasan diatas.

    Nah jika sobat ingin menambahkan widget dalam template pakai saja kode berikut masukkan dalam posisi yang sobat inginkan misalnya footer :
    <b:section id='footer' class='footer' showaddelement="yes"/>
    Mungkin ini yang bisa Share-Tuts jelaskan.. artikel ini bersumber dari http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888 jika ada yang salah mohon koreksinya, terimakasih semoga bermanfaat dan tungu kenjatunya tetang pengenalan kode HTML blogger, Kondisional tag, tag keseluruhan ditemplate blogger dan banyak lagi.

    Source : http://www.sodiycxacun.web.id
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 23.38

    Membuat Pop up Like Facebook hanya tampil di homepage


    Pop Up like facebook/subscribe masih jarang digunakan oleh para Blogger. Biasanya para Noob Blogger akan menggunakan Pesan Alert saat pertamakali masuk blog. Sebenarnya, pesan seperti ini tidaklah bagus. Karena setiap ke halaman manapun akan muncul, dan hanya berupa pesan yang tampilannya tidak bisa dimodif. Setelah Share-Tuts "Survey" di Mbah Google akhirnya Share-Tuts menemukan tutorial "Membuat Pop up widget Like facebook di blog". Lalu Share-Tuts praktekan dan ada hasilnya. Nah, karena itu Share-Tuts tulis tutorial yang mirip seperti tutorial yang Share-Tuts temukan yang tentunya hanya Intinya Share-Tuts yang sama. Pop up di sini tidak hanya bisa untuk like facebook saja, bisa yang lainnya. Seperti Subscribe, pesan, login, daftar, apa saja. Selebihnya lagi Widget ini dapat dimodif, tidak seperti Pesan Alert. 

    1. Masuk ke akun blogger sobat.
    2. Masuk ke halaman "Template"
    3. Klik "Edit HTML" > klik "Lanjutkan"
    4. Copy dan Taruh kode berikut tepat diantara script "<body> & </body>"
    <!-- like facebook -->
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>
    <script src='https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js'/>
    <link href='https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.css' rel='stylesheet' type='text/css'/>
    <script type='text/javascript'>
    jQuery(document).ready(function(){
    if (document.cookie.indexOf(&#39;visited=flase&#39;) == -1) {
    var fifteenDays = 1000*60*60*24*30;
    var expires = new Date((new Date()).valueOf() + fifteenDays);
    document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
    $.colorbox({width:&quot;400px&quot;, inline:true, href:&quot;#mdfb&quot;});
    }
    });
    </script>
    <div style='display:none'>
    <div id='mdfb' style='padding:10px; background:#fff;'>
    <h3 class='mdbox-title'>Receive all updates via Facebook. Just Click the Like Button Below<center><p style='line-height:3px;'>&#9660;</p></center></h3>
    <center>
    <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsharetuts&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=124561797694574' style='border:none; overflow:hidden; width:292px; height:258px;'/>
    </center><p style=' float:right; margin-right:35px; font-size:9px;'>Powered By <a href='http://www.share-tuts.bloogspot.com' style=' font-size:9px; color:#3B78CD; text-decoration:none;'>Share-Tuts</a></p>
    </div></div>
    </b:if>
    <!-- like facebook -->
    NB : kode yang berwarna merah ganti dengan kode Facebook Page sobat sedangkan warna hijau ganti dengan kata - kata yang sobat mau.

    Update : pertanyaan dari sobat Saiful Anasz gimana cara dapetin kode yang merah cara dapetinnya silahkan ke sini
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 15.31

    Membuat Headline News diBlog

    Halo sobat Share-Tuts
     
    Pada kesempatan kali ini Share-tuts akan memposting artikel tentang cara Membuat Headline News diBlog gunanya headline news ini diblog sobat adalah untuk menampilkan artikel - artikel sobat yang terbaru agar mudah dibaca oleh visitor. Widget ini mungkin perlu sobat pasang diblog agar dapat menarik perhatian pengunjung.

    Untuk tampilan Headline Newsnya :
    Cara Membuat Headline News :
    1. Masuk Pada blogger.com
    2. Pilih Rancangan >> Elemen Laman >> Tambah Gadget (dimanapun posisinya)
    3. Pastekan kode berikut ini :
      <!-- Headline news start -->
      <script type="text/javascript">
      var hn_url_blog = "http://share-tuts.blogspot.com";
      var hn_jumlah_post = 5;
      var hn_warna_latar = "#EEEEEE";
      var hn_warna_garis = "#000000";
      var hn_posisi = "bottom";
      var hn_tampilkan_judul = true;
      var hn_backlink = true;
      </script>
      <script src="https://sites.google.com/site/sharetuts41/home/headlinenews.js">
      </script>
      <!-- Headline news end -->
      Ubah:
      • NamaBlogAnda menjadi alamat blog Anda
      • hn_jumlah_post = 5 menjadi menjadi berapun jumlah post yang ingin Anda tampilkan
      • EEEEEE dengan warna latar keingin Anda
      • 000000 dengan warna garis keinginan Anda
      • hn_posisi ="bottom" untuk menampilkan dibawah blog ubah "top" jika ingin menampilkan diatas blog.
       
    4. Pilih Simpan dan Lihat Hasilnya.
    Selamat mencoba sobat
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 01.13

    Memasang Mesin Pencari Google di Blog


    Halo sobat Share-Tuts
    Buat sobat yang ingin punya mesin pencari tersikronisasi langsung dengan google, tentu sobat kurang puas dengan search engine yang oleh blogspot, kali ini Share-Tuts akan berbagi tips cara memasang google search engine widget yang tersikronisasi langsung dengan server om google sehingga anda tidak perlu membuka situs google terlebih dahulu, dan anda bisa langsung mencari kata kunci yang hasilnya 100% sama dengan anda membuka situs www.google.com silahkan baca artikel ini sampe tuntas. Untuk screenshootnya google search itu seperti dibawah ini.
     Untuk memasang google search widget ini, Sobat login dulu di blogger, kemudian masuk ke halaman tata letak lalu tambahkan page element dan pilih yang html/javascript. Selanjutnya, silahkan copy paste kode dibawah dan ganti text yang berwarna merah sesuai dengan keterangan blog anda :
    <form action="http://www.google.com/search" method="get">
    <input onfocus="this.style.background='#fff';" maxlength="255" value=""type="text"onblur="if(this.value=='')this.style.background='#fffurl(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)3px center no-repeat'" style="height:18px;border: solid 1px black; background:#fffurl(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)3px center no-repeat; position:relative;" size="25" name="q"/>
    <input id="btn_undefined" style="position:absolute;padding-left:5px;"value="Search" src="http://bloggerplugins.googlepages.com/yahoo-search-widget-button.png"type="image"/><br/>
    <div style="margin-top:5px;">
    <li style="display:inline;padding-right:10px;margin-top:5px;"><input checked="checked" value="" name="sitesearch" type="checkbox"/> Web</li>
    <li style="display:inline;padding-right:10px;margin-top:5px;"><input checked="checked" value="http://bloganda.blogspot.com" name="sitesearch"type="checkbox"/> Blog Anda</li>
    </div></form>
    Nah…setelah copy paste, sobat jangan lupa untuk mengganti text yang berwarna biru dengan alamat blog sobat dan warna merah bisa sobat masukan nama blog sobat atau terserah sobat. selamat mencoba.
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 00.22

    Cara Memasang Related Post diBawah Posting

    Halo sobat Share-Tuts
    Sobat Share-Tuts kali ini akan memberikan tutorial Cara Memasang Related Post diBawah Posting. Pernahkah sobat berpikir bagaimana cara membuat related post agar pembaca/pengunjung blog sobat tidak hanya membaca atau melihat posting itu yang mereka cari saja, nah kalau sobat pernah berpikir cara ini cukup bagus untuk dipraktekkan oleh sobat Share-Tuts.
    Langsung saja yah sobat praktekkan caranya :
    1. Sama seperti biasa sobat Login dulu ke Blogger > Rancangan (Design) > Edit HTML > Centang Pada Tulisan Expand Template Widget
    2. Kemudian pasang kode berikut di bawah tag </head> 
    <style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpL0jCNfcJsWddGcutiNeo6ER48fi8sNXA4HMivaVPOY5eSVDvrGvh-XesEP_Rlm6FZUFQltf-p3twGWE1kpzdek_rLn-t3_Zwax0J4YP1RAIG2N-_sfzTVUaWV2BI3eK2nPZLT3S73U/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/> 
    3. Jika sudah, cari <data:post.body/> (gunakan ctrl + F) lalu pasang kode berikut di bawahnya, jika ditemukan 2 buah kode, simpan di bawah kode yang ke 2
     <b:if cond='data:blog.pageType == "item"'>
    <div id="related-posts">
    <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>
    4. Save Template/Simpan Template.

    Keterangan:

    • pada tulisan warna merah di atas adalah warna tulisan dari widget ini.
    • pada tulisan warna orange di atas adalah warna garis 
    • Silakan ubah warna tersebutd dengan warna yang cocok untuk template Anda disini
     Mudah sekali bukan Sobat ? itu lah sedikit tutorial tentang Cara Memasang Related Post diBawah Posting.
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 22.21

    Widget Follow Twitter mirip Like box Facebook

    Halo sobat Share-Tuts
    Widget ini mirip sekali dengan widget yang disediakan facebook, bentuk persegi dengan ukuran foto lebih kecil pada bagian pojok kiri atas diikiti dengan nama akun pada kanan foto yang berada diatas tombol follow. Kegunaannya pun juga mirip, jika mereka memasang kotak like fanspage facebook sudah jelas pasti mereka ingin fanspagenya banyak likers sehingga pada twitter pun sama. Mereka yang memasang widget ini maka mereka ingin banyak followers pada akun twitternya.
    Oke langsung saja masukkan Script Pertama Follow Box Twitter
    <script type='text/javascript'> function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';} </script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("Share-Tuts");</script type="text><div style="font-size:10px;margin-top:-8px;"></div style="font-size:10px;margin-top:-8px;">   
    yang ini Script Kedua Follow Box Twitter
    <script src="http://95forfriend.googlecode.com/files/followboxtwitter_obachti95.js" type="text/javascript"></script><br /> <div id="twitterfanbox"> </div> <script type="text/javascript">fanbox_init("Share-Tuts");</script>
    Script mana yang sobat pakai hasilnya akan sama saja, karena pada script kedua hanya Share-Tuts perpendek dengan mengupload sebagian script ke hostingan googlecode. Namun wajib sekali bagi sobat untuk mengganti tulisan yang Share-Tuts beri ketebalan dengan id twitter sobat.

    Next or Sekarang cara membuat Follow Box Twitter


    1. Log in ke akun blogger sobat, pada halaman dasbor kemudian pergi ke halaman Tata Letak dan tambahkan widget baru seperti bagaimana sobat biasannya menambahkan widget lainnya.

    2. Masukan scriptnya tadi di sidebar mana pun atau footer template sobat tentu scriptnya tadi sudah sobat rubah dengan id twitter sobat sendiri.

    3. Simpan dan Lihat hasilnya.

    Oke Sobat Share-Tuts tutorialnya cukup simpel kan dan mudah dimengerti. Ngapain dibaca aja sobat langsung praktekin dah biar widget twitter sobat seperti Follow Box Twitter.

     Source : http://obachti-95.blogspot.com
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 22.15

    Alay Text Generator


    Alay adalah sebuah istilah yang merujuk pada sebuah fenomena perilaku remaja di Indonesia. “Alay” merupakan singkatan dari “anak layangan”. Istilah ini merupakan stereotipe yang menggambarkan gaya hidup norak atau kampungan. Selain itu, alay merujuk pada gaya yang dianggap berlebihan dan selalu berusaha menarik perhatian. Seseorang yang dikategorikan alay umumnya memiliki perilaku unik dalam hal bahasa dan gaya hidup. Dalam gaya bahasa, terutama bahasa tulis, alay merujuk pada kesenangan remaja menggabungkan huruf besar-huruf kecil, menggabungkan huruf dengan angka dan simbol, atau menyingkat secara berlebihan. Di Filipina terdapat fenomena yang mirip, sering disebut sebagai Jejemon.
    Itulah sekilas tentang alay yang Share-Tuts kutip dari id.wikipedia.com, disini Share-Tuts akan share script untuk membuat alay text generator menggunakan javascirpt.


     
    Masukan Text :

    Hasil Text Alay :

    BeSaR keCil P4k3 4n9k4 Disngkt
    Posted by: Share-Tuts
    Share-Tuts, Updated at: 00.30

    Memasang Pin It Button dengan Counter di Blogger

    Apa itu Pinterst ?. Pinterest merupakan 'Social Networking Image' yaitu jejaring sosial yang mengkhususkan pada gambar.

    Jadi, ketika anda menekan tombol Pin it, maka anda harus memilih gambar mana yang akan di share ke Pinterest. Hal yang berbeda yang yang anda lakukan dengan Facebook, ketika klik 'Like' atau 'Share' maka yang akan muncul adalah judul, thumbnail gambar dan deskripsi. Lain halnya dengan Pinterest, hanya men-share gambar yang ada di blog anda. Untuk lebih memahaminya, silahkan daftar di Pinterest.

    Dibawah ini, Share-Tuts buat tutorial cara memasang tombol (button) Pin it, baik Basic (tanpa counter) Vertical with counter dan Horizontal with counter.
     Langsung saja Step by Stepnya :

    1. Login ke BLogger
    2. Pilih Template 
        3. Lalu Pilih Edit HTML
       4. Cari kode <data:post.body/>, kemudian simpan kode Pin It button diawah kode tadi. (silahkan pilih kodenya).
    NB : Apabila Pin it button ingin tampil di atas postingan, maka simpan diatas <data:post.body/>
     Code / Script buat Pin It seperti diatas :
    <a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script>  
    Code / Script buat Pin It seperti diatas :
    <a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script>
    Code / Script buat Pin It seperti diatas :
    <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script>
       5. Klik Save Template / Simpan Template.

    Gimana sobat Share-Tuts gampang kan cara bikinnya, sekarang blog sobat Share-Tuts akan memunculkan tampilan Pin It. Selamat belajar ngeblog n Happy blogging sobat.

    Posted by: Share-Tuts
    Share-Tuts, Updated at: 20.06