Cara memasang share button radiculously responsive

Cara memasang share button radiculously responsive

Assalamualaikum,
Share button (tombol berbagi) merupakan salah satu widget penting didalam sebuah blog,dimana keberadaannya yang selain berfungsi sebagai jalan utuk sharing posting ke media sosial,juga keberadaan share button ini dapat membuat tampilan lebih menarik,apalagi jika tampilannya responsive.
Sebenarnya ada banyak share button responsive yang dapat dipasang di blog,namun dari sekian banyak share button,menurut saya share button radiculously lah yang lumayan paling baik dari segi tampilan dan fungsi.
Bagi anda yang ingin sekali memasang share button ini maka dikesempatan kali ini saya akan share caranya.

Cara memasang share button radiculously responsive
1.Pertama-tama silahkan anda hapus terlebih dahulu share button bawaan blogger,caranya dapat anda baca disini.Skip langkah ini apabila anda menginginkan share button bawaan blogger tetap ada.
2.Silahkan anda login ke blogger.com.
3.Berikutnya silahkan anda klik Template,seperti contoh gambar dibawah ini.

Cara memasang share button radiculously responsive

4.Berikutnya silahkan anda klik Edit HTML,seperti contoh gambar dibawah ini.

Cara memasang share button radiculously responsive

5.Berikutnya silahkan anda cari kode
</head>
6.Berikutnya silahkan anda copy dan paste CSS berikut ini diatas kode </head> tersebut.
<!-- RRSSB Share Button Responsive -->
<link href='https://googledrive.com/host/0B6pfV4RtjIP-UFlraU1XTHZJdjQ' rel='stylesheet' type='text/css'/>
7.Berikutnya anda silahkan anda cari kode
</body>

8.Berikutnya anda copy dan paste JQuery,script berikut ini diatas kode </body> tersebut
<!-- RRSSB Share Button Responsive -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script>window.jQuery || document.write(&#39;&lt;script src=&quot;js/vendor/jquery.1.10.2.min.js&quot;&gt;&lt;\/script&gt;&#39;)</script> <script src='https://googledrive.com/host/0B6pfV4RtjIP-RmRycmhfTDFDeXM' type='text/javascript'/>
9.Berikutnya silahkan anda copy kode berikut ini.
<!-- RRSSB Buttons START -->
      <ul class='rrssb-buttons clearfix'>
        <li class='rrssb-facebook'>
          <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'>
            <span class='rrssb-icon'>
              <svg height='29' preserveAspectRatio='xMidYMid' viewBox='0 0 29 29' width='29' xmlns='http://www.w3.org/2000/svg'>
                <path class='cls-2' d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z' fill-rule='evenodd'/>
              </svg>
            </span>
            <span class='rrssb-text'>facebook</span>
          </a>
        </li>
        <li class='rrssb-linkedin'>
          <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/>
              </svg>
            </span>
            <span class='rrssb-text'>linkedin</span>
          </a>
        </li>
        <li class='rrssb-twitter'>
          <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z'/>
              </svg>
            </span>
            <span class='rrssb-text'>twitter</span>
          </a>
        </li>
        <li class='rrssb-googleplus'>
          <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M14.703 15.854l-1.22-.948c-.37-.308-.88-.715-.88-1.46 0-.747.51-1.222.95-1.662 1.42-1.12 2.84-2.31 2.84-4.817 0-2.58-1.62-3.937-2.4-4.58h2.098l2.203-1.384h-6.67c-1.83 0-4.467.433-6.398 2.027C3.768 4.287 3.06 6.018 3.06 7.576c0 2.634 2.02 5.328 5.603 5.328.34 0 .71-.033 1.083-.068-.167.408-.336.748-.336 1.324 0 1.04.55 1.685 1.01 2.297-1.523.104-4.37.273-6.466 1.562-1.998 1.187-2.605 2.915-2.605 4.136 0 2.512 2.357 4.84 7.288 4.84 5.822 0 8.904-3.223 8.904-6.41.008-2.327-1.36-3.49-2.83-4.73h-.01zM10.27 11.95c-2.913 0-4.232-3.764-4.232-6.036 0-.884.168-1.797.744-2.51.543-.68 1.49-1.12 2.372-1.12 2.807 0 4.256 3.797 4.256 6.24 0 .613-.067 1.695-.845 2.48-.537.55-1.438.947-2.295.95v-.003zm.032 13.66c-3.62 0-5.957-1.733-5.957-4.143 0-2.408 2.165-3.223 2.91-3.492 1.422-.48 3.25-.545 3.556-.545.34 0 .52 0 .767.034 2.574 1.838 3.706 2.757 3.706 4.48-.002 2.072-1.736 3.664-4.982 3.648l.002.017zM23.254 11.89V8.52H21.57v3.37H18.2v1.714h3.367v3.4h1.684v-3.4h3.4V11.89'/>
              </svg>
            </span>
            <span class='rrssb-text'>google+</span>
          </a>
        </li>
        <li class='rrssb-pinterest'>
          <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/>
              </svg>
            </span>
            <span class='rrssb-text'>pinterest</span>
          </a>
        </li>
      </ul>
<!-- RRSSB Buttons END -->

10.Berikutnya silahkan anda paste kode yang saya berikan pada langkah nomor 9 dibawah kode
<div class='post-footer-line post-footer-line-1'>

atau
<div class='post-footer-line post-footer-line-2'>

atau
<data:post.body/>

(jika anda ingin meltakkan share button dibawah posting).
Jika anda ingin meletakkan share button diatas posting blog,maka silahkan anda letakkan kode tersebut dibawah kode
<div class='post-header'>

atau dibawah kode
<div class='post-header-line-1'/>

11.Jika sudah selesai? silahkan anda klik save untuk menyimpan perubahan.

Silahkan kunjungi blog anda untuk melihat hasilnya.
Demikianlah cara memasang share buttom radiculously responsive pada blogger,semoga bermanfaat.
Terimkasih telah berkunjung.
Assalamualaikum.
Selengkapnya ➢

Cara menyembunyikan share button bawaan blogger

Cara menyembunyikan share button bawaan blogger

Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara menghapus share button bawaan blogger di blog,yang semoga mudah di fahami.
Dikesempatan kali ini saya akan share cara menyembunyikan share button bawaan blogger tanpa harus menghapus kode di bagian template blog.Cara ini dapat anda tempuh apabila anda menginginkan kemudahan dan malas untuk memodifikasi template di dalam template,namun cara ini kurang efektif apabila anda ingin mengganti share button bawaan blogger dengan share button dari luar blogger,mengingat nantinya akan ada 2 style share button di blog yang anda miliki.

Berikut cara menyembunyikan share button bawaan blogger
1.Pertama-tama silahkan anda login terlebih dahulu ke blogger.com.
2.Di halaman dashboard blogger,silahkan anda klik Tata Letak seperti gambar dibawah ini.
Cara menyembunyikan share button bawaan blogger

3.Pada layout Tata Letak,silahkan anda klik Edit pada bagian  layout Main seperti contoh gambar dibawah ini.
Cara menyembunyikan share button bawaan blogger

4.Berikutnya silahkan anda hilangkan tanda ceck (centang) pada opsi share button,berikutnya silahkan anda klik simpan untuk menyimpan perubahan.Seperti contoh gambar berikut ini.
Cara menyembunyikan share button bawaan blogger

5.Jika sudah? Silahkan kunjungi blog anda untuk melihat hasilnya.

Untuk memunculkan kembali share button bawaan blogger,maka anda tinggal mengikuti langkah-langkah yang saya berikan diatas,bedanya jika ingin menyembunyikan share button bawaan blogger kita hilangkan tanda ceck (centang) nya sedangkan jika kita ingin memunculkan share button maka kita beri tanda ceck (centang) pada opsi share button.

Demikianlah cara menyembunyikan share button bawaan blogger,semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.
Selengkapnya ➢

Cara menghapus share button bawaan blogger

Cara menghapus share button bawaan blogger

Assalamualaikum.
Share button (tombol berbagi)  merupakan salah satu widget yang disiapkan oleh pihak blogger,dimana fungsinya ialah mempermudah pengunjung blog maupun pengguna blog untuk sharing posting yang sedang dibaca ke media sosial yang dimilikinya.
Adapun share button yang disiapkan oleh blogger adalah share untuk ke media sosial seperti facebook,google plus,twitter,pinterest,blogger,dan share via email,bagi saya saya hal ini dirasa sudah cukup membantu.
Namun yang namanya seorang blogger,tentu memiliki selera imajinasi dan kreativitas yang berbeda-beda,ada yang menyukai tampilan dari share button bawaan blogger dan ada yang tidak menyukai tampilan dari share button bawaan blogger.
Bagi yang menyukai tampilan dari share button bawaan blogger tentu akan membiarkan share button tersebut tetap berada di blog,namun bagi yang tidak menyukainya mereka akan mencoba untuk menghapusnya untuk diganti dengan share button buatan dari luar blogger.
Bagi anda yang juga ingin menghapus share button bawaan blogger,maka dikesempatan kali ini saya akan share caranya.Cara ini berlaku untuk template default simple blogger.

1.Pertama-tama silahkan anda login terlebih dahulu ke blogger.com.
2,Berikutnya silahkan anda klik Template,seperti contoh gambar dibawah ini.
Cara menghapus share button bawaan blogger

3.Berikutnya silahkan anda klik Edit HTML,seperti contoh gambar dibawah ini.
Cara menghapus share button bawaan blogger
4.Berikutnya silahkan anda cari dan hapus kode seperti berikut ini (untuk mempermudah pencarian silahkan anda menggunakan CTRL+F jika anda menggunakan komputer).
<div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>
5.Berikutnya silahkan anda cari dan hapus kode seperti berikut ini.
<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
</b:includable>
6.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.

Demikianlah cara menghapus share button bawaan blogger,semoga bermanfaat dan mudah anda fahami.
Terimkaasih telah berkunjung.
Assalamualaikum.
Selengkapnya ➢

Cara membuat related post dengan thumbnail (style ke-2)

Cara membuat related post dengan thumbnail (style ke-2)

Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara membuat related post dengan thumbnail,dikesempatan kali ini saya akan share cara membuat related post dengan thubmnail versi ke-2 di blog ini yang tentu tampilannya akan sedikit berbeda,namun fungsinya sama.

Berikut cara membuat related post dengan thumbnail (style ke-2)
1.Pastikan anda sudah login di blogger.com dengan akun masing-masing.
2.Di halaman dashboard silahkan anda klik Template > Edit HTML.
3.Berikutnya anda cari kode
</head>
(untuk mempermudah pencarian silahkan anda gunakan CTRL+F jika anda menggunakan komputer),lalu masukkan kode CSS berikut ini diatas kode tersebut.
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #ccc;  border-bottom:1px solid #ccc;  color:#fff;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#41749f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLzWI6CuXXSWL-wvOeU40OMWBVWqxQdzOqw7rtChMwIqPFF47EcMsREzCl3RPVUNn0jJwzXldwNQDqjUYt0xtb80lRjK3LlDAJ4RvzO_AOkMmJK99vr_axOwKAVFrJ5knn2ER5xBDHf7S/s1600/nav.png) repeat-x;background-position: 0px -63px; }
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:transparent; margin:0 0 5px; padding:5px; height:65px; list-style:none}
</style>
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}

4.Untuk menambahkan fungsi read more,silahkan anda letakkan script berikut diatas kode </head>.
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var morelink = "readmore";
var numchars = 50;
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>

5.Jika sudah? berikutnya anda copy kode berikut ini.
<div id='related_posts' style='margin-top:10px;'>
<h4>Related Posts</h4>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
</b:loop>
<script type='text/javascript'>relatpost();</script>
<ul id='relpost_img_sum'>
</ul>
</div>

Tambahan:
Untuk kata Related Posts dapat anda ganti dengan kata Artikel Terkait atau sesuai dengan selera anda.

6.Silahkan anda paste kode tersebut dibawah kode
<div class='post-footer-line post-footer-line-2'>
atau kode
<div class='post-footer-line post-footer-line-1'>
.
Perhatian:
Biasanya kode <div class='post-footer-line post-footer-line-2'> dan <div class='post-footer-line post-footer-line-1'> ada dua,Silahkan anda fokuskan pada kode yang kedua.Didalam tahap ini anda harus hati-hati dan teliti serta sabar,karena jika salah meletakkan kode maka akan gagal.

Demikianlah cara membuat Related Post dengan thumbnail (style ke-2) di blog,semoga bermanfaat.Jika anda mengalami kesulitan,silahkan bertanya di kolom komentar.
Terimakasih telah berkunjung.
Assalamualaikum.
Selengkapnya ➢

Cara membuat credit link pada bagian footer

Assalamualaikum.
Dalam memodifikasi sebuah template blogger,tentunya anda juga memikirkan bagian footer blog agar kelihatan lebih menarik.Salah satu cara untuk membuat footer terlihat lebih menarik adalah dengan cara membuat credit link pada bagian footer atau mengganti kata link powered by blogger (diberdayakan oleh blogger) dengan kata-kata yang kita inginkan.
Bagi anda yang ingin sekali membuat credit link pada bagian footer,maka dikesempatan kali ini saya akan share caranya yang semoga mudah anda fahami.
1.Pertama-tama silahkan anda login terlebih dahulu ke blogger.com.
2.Jika anda menggunakan template bawaan blogger,hilangkan terlebih dahulu link atribusinya,caranya dapat anda baca disini.
3.Jika anda sudah berhasil menghapus link atribusi bawaan blogger,berikutnya silahkan anda klik Template,seperti contoh gambar dibawah ini.

Cara membuat credit link pada bagian footer

4.Berikutnya silahkan anda klik Edit HTML,seperti contoh gambar dibawah ini.
Cara membuat credit link pada bagian footer

5.Berikutnya silahkan anda cari kode:
]]></b:skin>
(agar lebih mudah dalam pencarian,silahkan anda menggunakan CTRL+F jika anda menggunakan komputer).

6.Berikutnya silahkan anda paste kode berikut ini diatas kode ]]></b:skin> tersebut.
#credit-footer {
background:#333333;
overflow:hidden;
margin:0 auto;
padding:15px 15px 15px;
color:#dddddd;
text-align:center;
font-size:12px;
}
Keterangan:
  • Background Adalah warna background dari credit footer yang akan anda buat,silahkan anda rubah kode warna #333333 dengan kode warna yang anda sukai.
  • Margin adalah jarak luar antara konten satu dengan konten ainnya,silahkan anda rubah ukurannya sesuai selera anda.
  • Padding adalah jarak didalam konten,silahkan anda rubah ukurannya sesuai selera anda.
  • Color adalah warna font dari credit link yang akan anda buat,silahkan anda rubah kode warna #dddddd dengan kode warna yang anda sukai.
  • Text-align:center; adalah posisi teks dengan posisi di tengah,silahkan anda ganti kata center dengan kata right (posisi teks di kanan) atau left (posisi teks di kiri).
  • Font size adalah ukuran font,silahkan anda ganti ukuran 12px dengan ukuran yang anda perlukan.


7.Jika sudah,silahkan anda cari kode seperti ini:
<div id='footer-wrapper'>...</div>

8.Berikutnya anda masukkan kode berikut ini tepat dibawahnya.
<div id='creedit-footer'> <b:section class='clear' id='clear' preferred='yes'/>Copyright &#169; 2016
<span style='font-size:12px;'><data:blog.title/>
</span> | All Right Reserved | Design by <a href='http://www.inisiteku.com'>Achmad Jauhari</a><br/> Powered by <a href='http://www.blogger.com'>Blogger</a>
</div>
<div class='clear'/>
Keterangan:

  • Silahkan anda ganti teks yang berwarna biru sesuai selera anda.
  • Silahkan anda ganti URL yang saya beri warna merah dengan URL blog anda.


9.Terakhir,silahkan anda klik simpan untuk menyimpan perubahan.
Silahkan anda kunjungi blog anda untuk melihat hasilnya.
Demikianlah cara membuat credit link pada bagian footer blog,terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.
Selengkapnya ➢