! -Jeritan Blog | Pro Tutorial Blog | Panduan Blogspot

Custom Permalinks untuk Blogger

Khamis, Mac 14, 2013 Tutorial Blog 4 comments

Jika anda memilih "URL Automatik" ), maka Blogger akan menjana permalink itu sendiri. Jika anda ingin edit URL , pilih "URL Custom" dan anda boleh tulis permalink yg anda inginkan. Ia akan membolehkan anda untuk memasukkan huruf, tanda sengkang dan garis bawah. Jadi saya hanya menggunakan gabungan tanda sengkang dan huruf untuk mewujudkan pos permalink saya.

akhirnya Permalink akan menjadi sesuatu seperti
http://jeritanblog.com/yyyy/mm/the URL peribadi yang anda tetapkan ...

oleh itu url akan menjadi seperti dibawah;
http://jeritanblog.com/yyyy/mm/custom-permanent-link.html

Auto Pop Email Subscription Widget Untuk Blogger

Khamis, Januari 17, 2013 Widget 6 comments

Auto Pop Email subscription widget untuk Blogger . Satu cara mudah untuk mendapatkan lebih pelanggan e-mel. Widget ini tumbul apabila cursor menekan atas sekali. Elemen ini boleh berubah mengikut keperluan anda. . Jadi, apabila anda menatal lalu bahagian komen blog anda ia akan Popout dari atas. Anda boleh menambah widget ini ke dalam blog anda melalui tutorial dibawah ini..

Bagaimana Untuk Tambah Auto Pop Email Subscription Widget Untuk Blogger

Langkah 1
1. Login ke Blogger, Klik Layout :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<style type='text/css'> /*<![CDATA[*/ #slider{ position:fixed; top:-125px; right:0px; height:120px; width:100%; background-color:#fff; opacity:0.98; -moz-box-shadow: 0px 0px 8px #ccc; -webkit-box-shadow: 0px 0px 8px #ccc; box-shadow: 0px 0px 8px #ccc; } .syb_footer{margin-top:-10px;font-size:0.8em;} #slider #slider-shell{ width:800px; height:110px;margin:10px auto; position:relative; } #slider #slider-tab{position:absolute; bottom:0px; right:0px; width:400px; text-align:right; padding-right:10px; cursor:pointer; font-size:0.6em; } #syb_embed_signup{ background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }#syb_embed_signup form {display:block; text-align:left; padding:10px 0 10px 3%}#syb_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}#syb_embed_signup input {border:1px solid #999; -webkit-appearance:none;}#syb_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}#syb_embed_signup input[type=radio]{-webkit-appearance:radio;}#syb_embed_signup input:focus {border-color:#333;}#syb_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block;font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}#syb_embed_signup .button:hover {background-color:#777;}#syb_embed_signup .small-meta {font-size: 11px;}#syb_embed_signup .nowrap {white-space:nowrap;} #syb_embed_signup .clear {clear:none; display:inline;}#syb_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}#syb_embed_signup input.email {padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}#syb_embed_signup input.button {width:35%; margin:0 0 10px 0; min-width:90px; } /*]]>*/ </style><script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script><div id='slider' style='top: -108px;'><div id='slider-shell'><div id='syb_embed_signup'><form action='http://feedburner.google.com/fb/a/mailverify?uri=jeritanblog' id='syb-embedded-subscribe-form' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'><label for='syb-EMAIL'>Get my next article in your inbox!</label><input class='email' id='syb-EMAIL' name='email' placeholder='Email Address' required='required' type='email' /><div class='clear'><input class='button' id='syb-embedded-subscribe' style='background-color: #0066cc;' type='submit' /></div></form><div class='syb_footer'><small><a id='syb_email_link' target='_blank' href='http://www.jeritanblog.com' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://img1.blogblog.com/img/blank.gif' alt='Email Subscription Widget for Blogger' style='border:none' /></a>Powered By <a href='http://www.jeritanblog.com' target='_blank' title='Blogger Widgets and Gadgets'>JeritanBlog Widgets</a></small></div></div><div id='slider-tab'>Wait! I want to get email updates, bring that back...</div></div></div><script type='text/javascript'>$(document).ready(function(){function isScrolledDown(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(e<=c)}function isScrolledUp(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(d-200>=c)}function bringSliderOut(){$(f).animate({top:0},'fast');$('#slider-tab').text('hide this...')}function bringSliderIn(){$(f).animate({top:-108},'fast');$('#slider-tab').text('Wait! I want to get email updates, bring that back...')}var f=$('#slider');var g=$('#comments');var h=false;var i=false;$('#slider-tab').click(function(){if(!i){bringSliderOut();i=true}else{bringSliderIn();i=false}});$(window).scroll(function(){if(isScrolledUp(g)){if(h){bringSliderIn();h=false;i=false}}else if(isScrolledDown(g)){if(!h){bringSliderOut();i=true;h=true}}})}); </script>

Edit :-

Anda perlu tukar warna purple sahaja kepada FeedBurner ID Anda..
uri=jeritanblog

Recent Comment seperti Window 8

Rabu, Januari 16, 2013 Cantikkan Blog No comments

Blogger sudah memperkenalkan replies komen Threaded kepada semua blog pada awal bulan Januari 2012.Pilihan membalas terus kepada komen pada Blogger adalah salah satu daripada permintaan yang paling popular oleh Blogger users.saya mempunyai tutorial untuk menambah sedikit gaya kepada Blogger comments.Dalam css ini saya menambah tempat yang komen dalam gelembung ucapan yang bulat dengan anak panah avatar penulis pautan balasan juga highlighted.Jika anda berminat boleh melihat demo dan lihat tutorialnya.

Tambah Gaya Css Untuk Blogger Threaded Comments

Jangan lupa supaya Backp up templates anda dulu sebelum melakukan tutorial ini.
Bagaimana untuk Backup Blogger Template

Langkah 1. Didalam (New Design) Blogger Dashboard Klik Drop Down Menu > Pilih Template > Edit Html > Proceed > Tick The Expand Widget Templates Box.

Langkah 2. Carikan kode dibawah ini didalam Html : (Klik CTRL and F untuk carian)

]]>

Langkah 3. Copy kode dibawah ini dan paste diatas atau sebelum kode ]]>

#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}

Jangan lupa simpan !

Langkah 4.Tambah Add Widget HTML

Copy dan paste kode ini didalam kotak tadi...

<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://lh5.googleusercontent.com/-guvkuPPmsVs/UJ1pLNIjF9I/AAAAAAAABQI/6Bu24lihRtE/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>

Selepas itu klik save semoga berjaya

Tambah Butang Follow Dan Dashboard

Rabu, Januari 16, 2013 Cantikkan Blog 1 comment

Jika berminat boleh ikuti tutorial dibawah ini :)

Bagaimana Untuk Tambah Butang Follow Dan Dashboard

Langkah 1
1. Login ke Blogger, Klik Layout :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID " target="_blank" rel="nofollow" title="Follow Jeritan Blog !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div>

Edit :-

Merah : Blog ID Korang
Untuk mencari nombor ID anda boleh lihat di address bar ade nombor id korang...

Biru : Perkataan apabila butang follow dilalukan cursor
Pink : Perkataan apabila butang dashboard dilalukan cursor

Tambah Spinning Ikon Sosial Menggunakan CSS3 Untuk Blogger

Jumaat, Januari 04, 2013 Widget No comments

Sekarang saya akan berkongsi dengan anda, widget perkongsian berputar sosial, yang berputar apabila tetikus berlegar mengikut ke tahap yang anda tetapkan, dan kembali ke kedudukan asal ia apabila jauh dari sosial itu.

Bagaimana Untuk Tambah Spinning Ikon Sosial

Langkah 1
1. Login ke Blogger, Klik Layout :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

Advanced Gaya Mashable Widget Termasuk Ikuti Pinterest, Twitter, Dan Butang Google+

Khamis, Januari 03, 2013 Cantikkan Blog No comments

Widget gaya Mashable adalah salah satu widget perkongsian sosial yang paling popular yang boleh didapati di banyak blog / tapak. Ia melibatkan berbeza sosial media butang / kotak seperti kotak pengikut Google+, facebook seperti kotak, pin butang, pengikut twitter butang, mengikuti butang pinterest, dan kotak langganan bergaya. Melaksanakan ini di blog anda meningkatkan peluang anda untuk mendapatkan lebih banyak pelanggan dan pengikut.

Bagaimana Untuk Tambah Widget Gaya Mashable

Langkah 1
1. Login ke Blogger, Klik Layout :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<style>
    /* Social Widget */
    #rb-mashable-bar {
        border: 0;
        margin: 0 auto;
        width:300px;
        border: 1px solid #DDD;
    }
    .fb-likebox {
        background: #FFFFFF;
        padding: 10px 13px 0 -5px;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-bottom: 1px solid #D8E6EB;
        margin:0px;
        height:70px;
    }
    .googleplus {
        background: #eae8e8;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family:"Arial", "Helvetica", sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;
    }
    .googleplus span {
        color: #000;
        font-size: 14px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;
        font-family: calibri;
        width: 280px;
    }
    .pinterest1 {
        background: #e7d9d9;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family:"Arial", "Helvetica", sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;
    }
    .pinterest1 span {
        color: #000;
        font-size: 14px;
        position: absolute;
        display:inline-block;
        margin: 9px 40px;
        font-family: calibri;
        width: 280px;
    }
    .g-plusone {
        float: left;
    }
    .gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;
    }
    .twitter {
        background: #eae8e8;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;
    }
    .pterest {
        background: #e7d9d9;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;
    }
    #mashable {
        background: #FFFFFF;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;
    }
    #mashable .author-credit {
    }
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;
    }
    #email-news-subscribe .email-box {
        background: #eae8e8;
        padding: 5px 10px;
        font-family:"Arial", "Helvetica", sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
        height:36px;
    }
    #email-news-subscribe .email-box input.email {
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family:"Arial", "Helvetica", sans-serif;
    }
    #email-news-subscribe .email-box input.email:focus {
        color:#333
    }
    #email-news-subscribe .email-box input.subscribe {
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
        font-family:"Arial", "Helvetica", sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:0px solid #9c9c9c;
        color:white;
        text-shadow:#cc7c00 0px 0px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;
    }
    #email-news-subscribe .email-box input.subscribe:hover {
background: rgb(143,2,34);
background: -moz-linear-gradient(top, rgba(143,2,34,1) 0%, rgba(109,0,25,1) 1%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,2,34,1)), color-stop(1%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(143,2,34,1) 0%,rgba(109,0,25,1) 1%);
background: -o-linear-gradient(top, rgba(143,2,34,1) 0%,rgba(109,0,25,1) 1%);
background: -ms-linear-gradient(top, rgba(143,2,34,1) 0%,rgba(109,0,25,1) 1%);
background: linear-gradient(to bottom, rgba(143,2,34,1) 0%,rgba(109,0,25,1) 1%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f0222', endColorstr='#6d0019',GradientType=0 );
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:0px solid #dcdbdb;
        color:#FFFFFF;
        text-shadow:#dcdbdb 0px 0px 0
    }
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family:"Arial", "Helvetica", sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
        height:37px;
    }
    #other-social-bar ul {
        list-style: none outside none;
        padding-left: 4px;
    }
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;
    }
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;
    }
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;
    }
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;
    }
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;
    }
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;
    }
    #other-social-bar .other-follow li.my-rss {
        background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
        margin-left:5px;
    }
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a {
        text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover {
        text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
    }
    #other-social-bar .other-follow li.my-gplus {
        background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;
    }

</style>
<div style="margin-bottom:10px;"><div id="rb-mashable-bar"><div class="gplus"><link href="https://plus.google.com/u/0/102645638653451045589/" rel="publisher" /><script type="text/javascript">window.___gcfg={lang:'en'};undefinedfunctionundefined){var po=document.createElementundefined"script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagNameundefined"script")[0];s.parentNode.insertBeforeundefinedpo,s);})undefined);</script><script type="text/javascript">var _gaq=_gaq||[];_gaq.pushundefined['_setAccount','UA-29131740-1']);_gaq.pushundefined['_trackPageview']);undefinedfunctionundefined){var ga=document.createElementundefined'script');ga.type='text/javascript';ga.async=true;ga.src=undefined'https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagNameundefined'script')[0];s.parentNode.insertBeforeundefinedga,s);})undefined);</script><g:plus href="https://plus.google.com/u/0/102645638653451045589/" width="300" height="131" margin="0px" theme="light"></g:plus></div><div class="fb-likebox"><div id="fb-root"></div><script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script><div class="fb-like-box" data-href="http://www.facebook.com/jeritanblog" data-width="292" data-show-faces="false" data-stream="false" data-header="false"></div></div><div class="googleplus"><span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></div><div class="pinterest1"><a href='javascript:void(run_pinmarklet1())'><img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0;padding:0;border:none;'/></a><script type='text/javascript'>function run_pinmarklet1(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);}</script><span>Pin It On Pinterest</span></div><div class="twitter"><iframe title="" style="width: 300px;height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&align=&button=blue&id=twitter_tweet_button_0&lang=en&link_color=&screen_name=nikzhafran&show_count=&show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe></div><div class="pterest"><a href="http://pinterest.com/jeritanblog/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a></div><div id="email-news-subscribe"><div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=jeritanblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email" type="text" style="width: 150px;font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input type="hidden" value="jeritanblog" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Subscribe" /></form></div></div><div id="other-social-bar"><ul class="other-follow"><li class="my-rss"><a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/jeritanblog" target="_blank">RSS Feed</a></li><li class="my-twitter"><a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/nikzhafran target="_blank">Twitter</a></li><li class="my-gplus"><a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/102645638653451045589 target="_blank">Google Plus</a></li></ul></div><div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: " arial ","helvetica ",sans-serif;"><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.jeritanblog.com/" target="_blank"> Get This �</a></span></div></div></div>

Panduan Edit

Edit mengikut warna supaya tidak pening.

nak edit lebar cuma tukar ini width: 300px
Tukar 102645638653451045589 dengan google+ profile page id number.
Tukar jeritanblog dengan facebook fanpage username.
Tukar nikzhafran dengan twitter username.
Tukar jeritanblog dengan pinterest account username.
Tukar http://feedburner.google.com/fb/a/mailverify?uri=jeritanblog dengan site feed url, dan jeritanblog dengan feed id.
Tukar 102645638653451045589 dengan profile id number.

Semoga berjaya :P

Custom Permalinks untuk Blogger

Auto Pop Email Subscription Widget Untuk Blogger

Recent Comment seperti Window 8

Tambah Butang Follow Dan Dashboard

Tambah Spinning Ikon Sosial Menggunakan CSS3 Untuk Blogger

Recent Posts Widget Dengan Thumbnails

Advanced Gaya Mashable Widget Termasuk Ikuti Pinterest, Twitter, Dan Butang Google+

Google+ Badge

Label

All Post

Popular Post

Recent Posts

GENG JERITANBLOG

Author

Social

Recent Comments