Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #3

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #3

Bloggingpasuruan – Saya sebelumnya sudah share mengenai Widget "Abaut Me"  atau About the Author blogger ini perbedaan dari widget sebelumnya hanya terletak pada desain widgetnya saja. Widget kali ini memiliki latar belakang profil berupa foto, nama dan deskripsi tentang penulis blog. Widget About the Author ( tentang penulis ) di buat sederhana namun kesan pro masih melekat dalam desainnya, widget hanya menunjukkan sebuah gambar dengan Google+ tombol dan link ke profil Google+ pengikut. Kali ini Bloggingpasuruan akan model widget "About Me" yang di letakkan dibawah posting blog namun mudah digunakan, keren dan ada tambahan 3 tombol jaringan sosial di dalam widget yang. Saya harap Anda menyukai widget ini. Untuk menambahkan widdget ini ke blog ikuti langkah-langkah di bawah ini




Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #3

1. Masuk ke Blogger >> Dashboard >> Templete >> Edit HTML

2.Cari kode <head>, kalau sudah ketemu >> letakkan kode di bawah ini sebelumkode <head>


<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>


3. Kemudian cari juga kode seperti di bawah ini :

<div class='post-footer-line post-footer-line-1'>


4.Anda akan menemukan dua atau lebih kode yang mirip atau sama ( kode di bawah ini jangan diletakkan pada kode yang pertama ), sekarang salin kode dibawah ini ( kode CSS ) dan paste tepat di bawah kode yang ke kedua.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
.ks-auth {height:160px; width:500px; background:#151515; margin:auto;overflow:hidden;    -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
     -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
          box-shadow: 0px 1px 5px rgba(0,0,0,.25);}
.ks-auth1 {width:120px;height:100%; float:left;}
.ks-auth2 {float:right; margin-top:-155px;}
.ks-auth2 h3 { color:#fff; margin-left:135px; margin-top:8px; margin-bottom:8px; border-bottom:1px dashed #5C97BF;font-family: 'Droid Serif', serif; font-weight:300;font-size:16px;}
.ks-auth2 img { float:right; margin-right:7px; height:20px; width:20px; margin-top:-4px}
.ks-auth2 img:hover { opacity:.9;}
.ks-auth2 p {font-size:13px; color:#fff; margin-left:135px;font-family: 'Droid Serif', serif; line-height:1.5; margin-top:5px; font-weight:100}/*crawlist.net CSS ends*/
</style><!—bloggingpasuruan.blogspot.co.id - widget starts-->
<div class='ks-auth'><div class='ks-auth1'>
  <img src="link URL foto Anda" style='float:left; border-radius:50%; border:2px #f5f5f5 solid; width:100px; height:100px; margin-left:15px; margin-top:18px;'/>
</div>
<div class='ks-auth2'>
<h3>About Author <a href="http://plus.google.com/ID google plus anda" title="Find me on Google plus" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbCWl7h_-2vHhuQ_FfsZL2rpilAn_0D44QRadud2sqXqu9TWoHj2N-68O6RP1MTEfxJ1WfolKWa3V8zrMaqWqr8oUFVsJmDZd6r2R1vqKnXtE2EebMgqQPEdHZ9ajplhxLQHicTHlGWdbX/s1600/google-plus_64.png"/></a>
<a href="http://www.twitter.com/ ID Twitter anda " title="Find me on Twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYr91x2QP7ujcePRzrusMPs7wYi-bfs_7IiPeQE41ssvnSs8xZP-s7_-QrMJJjsocwf1gGbv5hypfXxIo08p6XVNfzcCNpJkZKGt7fCmuImsGhCJUmWEFEnInSoot9Cx7fLpuXs0jS5i4P/s1600/twitter_64.png"/></a>
<a href="http://www.facebook.com/ ID Facebook anda " title="Find me on Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSKocQ3-u7uk37nY8WN_zCwnNdZ08Yc00RMgtUasi49fegbZmHStc8HbR73_wuoZH4T6l4BnsyfkerLjG018jmYALorHcB21XfXI5QifibqwLby4e6hiRuCUQNVB1vzHCXigs2mxoPSlJM/s1600/facebook_64.png"/></a></h3>
<p>Tulis diskripsi profile Anda sebagai penulis blog disini { kira 30 sd 40 kata }</p>
</div></div><!—blogginpasuruan.blogspot.co.id - widget ends--></b:if>


5. Jika Anda tidak menemukan kode <div class='post-footer-line post-footer-line-1'>
Pada template blog, silakan cari kode ini : </article>

6. Kemudian paste kan kode CSS di atas dibawah kode </article>

Jika ada masalah dengan widget diatas, silahkan tinggalkan komentar anda di kotak komentar di bawah ini.

Semoga bermanfaat….

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #2

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #2

Bloggingpasuruan - Widget "Abaut Me"  atau About the Author blogger ini memiliki latar belakang profil berupa foto, nama dan deskripsi tentang penulis blog. Widget About the Author ( tentang penulis ) di buat sederhana namun kesan pro masih melekat dalam desainnya, widget hanya menunjukkan sebuah gambar dengan Google+ tombol dan link ke profil Google+ pengikut. Kali ini Bloggingpasuruan akan share 4 model widget "About Me" yang mudah digunakan, keren dan ada tambahan 4 tombol jaringan sosial di dalam widget yang. Saya harap Anda menyukai widget ini. Untuk menambahkan widdget ini ke blog ikuti langkah-langkah di bawah ini



Cara membuatnya silahkan ikuti langkanya berikut ini, karena widget ini akan kita tempatkan atau pasang dibawah posting artikel blog.



1. Masuk Blogger Dashboard >> Layout >> Blog Posts, kemudian klik "Edit"

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #2


2. Pada halaman berikut ini, scroll ke bawah, cari "Tampilkan Penulis Profil di bawah posting" pilihan-kotak dan klik "Simpan" tombol untuk menyimpan pengaturan Anda.

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #2



Bagaimana Menambahkan Author Box Widget di Blogger


1. Masuk ke Dashboard >> Template >> Edit / HTML

2. Sekarang cari kode seperti dibawah ini ( Tip untuk mencari: Ctrl + F )


<div class='post-footer-line post-footer-line-1'>


3. Anda akan menemukan dua atau lebih kode yang mirip atau sama ( kode di bawah ini jangan diletakkan pada kode yang pertama ), sekarang salin kode dibawah ini ( kode CSS ) dan paste tepat di bawah kode yang ke kedua.


<style>.wc-aboutauthor{float:left;width:500px;padding:15px;border:1px solid #ccc;margin-bottom:15px;margin-top:15px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6o6uo1LZS6PMrIxsy30jsyEtXTInjHkA4DNDeQnZisDbV-u6wKYY1EOLwP-A31rOcmTlw72N7T1MIGMbFy6rieR8V4Ndc7X7SMwQlwHFBsnOY0__H2jqEQz4petVAwoQ3XYQACSUyifEr/s1600/backgrounds.png');color:#444444;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .5);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .5);box-shadow:0px 0px 10px  rgba(0, 0, 0, .5);}.wc-aboutauthor h2{color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px;
    }.wc-aboutpic{float:right;margin:0 0 0 10px;}.wc-aboutpic img{border:1px solid #999999;-webkit-transition:-webkit-transform .15s linear;-moz-transition:-moz-transform .15s linear;-o-transition:-o-transform .15s linear;transition:transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.27);-moz-box-shadow:0 3px 6px rgba(0,0,0,.27);box-shadow:0 3px 6px rgba(0,0,0,.27);padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;}.wc-aboutpic img:hover{background:#FFFFFF;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .5);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .5);box-shadow:0px 0px 10px  rgba(0, 0, 0, .5);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg);}.wc-aboutsoc img{height:35px;margin-bottom:-13px;}.wc-aboutsoc  p{font:16px georgia;color:#ffffff;background:#b6e026;display:inline;border-radius:6px;padding:6px;margin-right:30px;}</style><b:if cond='data:blog.pageType == "item"'><div class='wc-aboutauthor'><div class='wc-aboutpic'><img alt='Author image' height='150' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-JKOzoFTkd8kCHhyq-F_HsfNHA8S4gjxzXkqUhYdiNH5a799m1n-fWU8e4IVxfr2EphVa8v-9MFxHmcTeH-0uA8_DSR0n71fKzVXr5ZlhDnnI9iVjEJ6ZyBqtygvhJ_wQBB52O5C7HGa/s1600/icon.png' width='150'/></div><span style="font-family: Verdana, sans-serif; font-size: large;"><b>Tentang Penulis</b></span><div style="text-align: justify;"><p>Tuliskan diskripsi Anda sebagai seorang penulis disini</p></div><div class='wc-aboutsoc'><p> Follow me on: </p><a href='link ID Facebook Anda'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJRzY1GSNRUmiGNjTsVk9QlzSeht9n-Ki-9CiVa_uERudNeVDlXWF1LVVtb8HzUY33NGtaXZAIy1e8w_3cMYLb6bAWhJ1pNATriMlv_ShZ0Iezvsfzk3epxXlx6KFEV2BhsVgzE2J6tTW/s1600/facebook.png' title='Facebook'/></a>    <a href=' link ID Twitter Anda'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6NDshuj0EdkfuAfmlmSNWjScJ4V7MRAJOKPohmiYavZmVdn3Pz6u_VECPzfRcYqGiLbUwuWn5JPc__tKfApYCq8PSLptOIomQLGix47VThxNu6UIepgLzO9V1nDCMJgO-nP_dD97wJHv/s1600/twitter.png' title='Twitter'/></a> <a href=' link ID Plus Page Anda ' > <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJA2NVJ4oQolmB7telg5scU2lIZlcX0wN6BAMHrxJ5SD7nUDM-TyKcraTakMiP62B9JIQnVkoPI63dP8mxRYEszdsIb0f6sm1qfcYSyD3JHni_Z_q_Y_kdLtVE-0SVdZyU0p_igiKNsu9P/s1600/gplus.png' title='Google plus'/></a> <a href=' link  ID LinkedIn User Anda '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6QBpgSz2Cxavv0lX3w-bWJtBjibZ_PyLyQlBoajktPSm6nCK8wrE7x5tzCW2z4TvJopo_rHwWgOxoomY_9XTvzojhpnNfsPKYCuUOY1AslDP8qnaQ0xOjtodoYXgX8_5H_ZEZUwcvTrNB/s1600/linkedin.png' title='LinkedIn'/></a></div></div></b:if>


4. Sekarang klik pada "Simpan template"

Jika ada masalah dengan widget diatas, silahkan tinggalkan komentar anda di kotak komentar di bawah ini.

Semoga bermanfaat….

Cara Membuat Widget About Author ( tentang Penulis ) Blogger

Bloggingpasuruan - Widget "Abaut Me"  blogger ini memiliki latar belakang profil berupa foto, nama dan deskripsi tentang penulis blog. Widget About Me ( tentang penulis ) di buat sederhana namun kesan pro masih melekat dalam desainnya, widget hanya menunjukkan sebuah gambar dengan Google+ tombol dan link ke profil Google+ pengikut. Kali ini Bloggingpasuruan akan share 4 model widget "About Me" yang mudah digunakan, keren dan ada tambahan 4 tombol jaringan sosial di dalam widget yang. Saya harap Anda menyukai widget ini. Untuk menambahkan widdget ini ke blog ikuti langkah-langkah di bawah ini.


Langkah 1: Buka blogger Dashboard >> Tata Letak >> Add Gadget >> Html / javascript.

Langkah 2: Salin kode yang diinginkan dari widget "About Me" yang saya berikan dibawah ini kemudian salin ( copas ) pada kotak kode >> Html / javascript

Cara Membuat Widget About Author ( tentang Penulis ) Blogger


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div class="box">
   <div class="ribbon"><span>Admin</span></div>
<div id="about-me">
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Ganti Nama Anda</p><p></p><h5>Masukkan teks mengenai profile Anda disini</h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="ganti link id Facebook Anda" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="ganti link ID Twitter Anda" target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/ ganti ID google+Anda " target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="ganti ID Pinterest Anda " target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div></div>
<style>
#about-me{
  color:#444;
    width: 300px;
    padding: 20px 10px 110px;
    border: 2px solid #555;
  background-color:#eee;
 font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 2px solid #666;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 16px;
  border-radius: 2px;
  left: 8px;
}
#about-me p{
position:absolute;
bottom:84px;
  font-size:17px;
font-weight:bold;
  left:119px;
color: rgb(58, 148, 227);
}
#about-me h5{
  width:200px;
  position:absolute;
  left:119px;
  top:9px;
  color:#555;
font-size:14px;
}
#my-link {
position:absolute;
top: 94px;
  left: 119px;
}
.ribbon {
  position: absolute;
  left: -3px; top: -3px;
  z-index: 5;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#359BED 0%, #5467A7 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #5467A7;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #5467A7;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
</style>


Model 2

Cara Membuat Widget About Author ( tentang Penulis ) Blogger


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me">
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Nama Anda</p><p></p><h5>Masukkan teks mengenai profile Anda disini </h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/ganti ID facebook Anda" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/ ganti ID Twitter Anda " target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/ ganti ID Google plus  Anda " target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/ ganti ID pinterest Anda " target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 314px;
  padding: 40px 22px 114px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 6px double #A0A0A0;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 23px;
  border-radius: 12px;
  left: 18px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(-17deg);
  z-index: 5;
}
#about-me p {
  position: absolute;
  bottom: 102px;
  font-size: 18px;
  font-weight: bold;
  left: 146px;
  color: rgb(58, 148, 227);
}
#about-me h5 {
  width: 185px;
  position: absolute;
  left: 146px;
  top: 15px;
  color: #747272;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-align: left;
}
#my-link {
  position: absolute;
  top: 20px;
  left: 332px;
}
#my-link img{
border-radius:70px;
padding:2px;
}
</style>



Model 3


Cara Membuat Widget About Author ( tentang Penulis ) Blogger


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me">
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Nama Anda</p><p></p><h5>> Masukkan teks mengenai profile Anda disini </h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/ganti ID Facebook Anda" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/ ganti ID Twitter Anda " target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/ ganti ID Google plus  Anda " target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/ ganti ID pinterest Anda " target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 225px;
  padding: 20px 10px 110px;
  border: 2px solid #B0AEAE;
background: -webkit-linear-gradient(#eee, white);
  font-family: 'Open Sans Condensed',sans-serif;
  height: 175px;
}
#about-me img {
  border: 2px solid #666;
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: 184px;
  border-radius: 60px;
  left: 65px;
}
#about-me p {
  position: absolute;
  bottom: 135px;
  font-size: 19px;
  font-weight: bold;
  left: 91px;
  color: rgb(58, 148, 227);
}
#about-me h5 {
  letter-spacing: 0.3px;
  width: 200px;
  position: absolute;
  left: 35px;
  top: 140px;
  color: #555;
  font-size: 14px;
  text-align: center;
}
#my-link {
  position: absolute;
  top: 260px;
  left: 79px;
}
</style>



Model 4

Cara Membuat Widget About Author ( tentang Penulis ) Blogger


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me">
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Nama Anda</p><p></p><h5> Masukkan teks mengenai profile Anda disini <br /><br />Email: nama-anda@gmail.com<br />Phone: xxx-xxx-xxx-001<br />Skype ID: Nama Anda</h5>
<p></p><p></p><h4>Author Name:</h4>
</div>
<div id="my-link"><p>Ikuti Saya </p>
<a href="https://www.facebook.com/pages/ganti ID Facebook Anda" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" title="Facebook" width="35px" height="35px" /></a>
<a href="https://twitter.com/ ganti ID Twitter Anda " target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/danleech/simple/1024/twitter-icon.png" title="Twitter" width="35px" height="35px" /></a>
<a href="https://plus.google.com/ ganti ID Google plus Anda " target="_blank"><img alt="Google+" src="https://developers.google.com/+/images/branding/g+128.png" title="Google" width="35px" height="35px" /></a>
<a href="https://www.pinterest.com/ ganti ID pinterest Anda " target="_blank"><img alt="Pinterest"  src="http://www.iconarchive.com/download/i54058/danleech/simple/pinterest.ico" title="Pinterest"  width="35px" height="35px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 275px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
  height: 310px;
}
#about-me img {
  border: 2px solid #A0A0A0;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 15px;
  border-radius: 4px;
  left: 186px;
}
#about-me p {
  position: absolute;
  top: -2px;
  font-size: 18px;
  font-weight: bold;
  left: 99px;
  color: rgb(58, 148, 227);
  letter-spacing: .4px;
}
#about-me h5 {
  border-top: 3px double #999;
  width: 169px;
  position: absolute;
  left: 13px;
  padding-top: 5px;
  top: 16px;
  color: #747272;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-align: left;
}
#about-me h4 {
  font-size: 18px;
  position: absolute;
  top: 15px;
  left: 14px;
}
#my-link {
  position: absolute;
  top: 268px;
  left: 10px;
}
#my-link p {
position: absolute;
  bottom: 29px;
  color: #444;
  font-size: 16px;
  font-weight: bold;
  left: 3px;
}
#my-link img{
border-radius:5px;
padding:2px;
}
</style>

Kustomisasi

Ganti link yang saya warnai kuning dengan link foto Anda. Jika ada masalah dengan widget diatas, silahkan tinggalkan komentar anda di kotak komentar di bawah ini.

Semoga bermanfaat….

Hosting Alternatif Selain Google Code untuk Proyek Open Source

Hosting Alternatif Selain Google Code untuk Proyek Open Source

Google telah menutup Google Code pada 25 Januari 2015, layanan hosting untuk proyek-proyek open source dan coding. Jika Anda belum mengalihkan proyek Anda ke layanan lain, sekarang adalah waktu yang baik. Berikut adalah beberapa alternatif layanan hosting untuk proyek-proyek open source dan coding.

GitHub

Hosting Alternatif Selain Google Code untuk Proyek Open Source

GitHub adalah raksasa untuk layanan hosting untuk proyek-proyek open source dan coding. Untuk pengguna dasar GitHub memberikan fasilitas yang benar-benar gratis. Jika Anda mencari fitur profesional, atau pilihan untuk membangun sebuah portofolio proyek GitHub menyediakan upgrade premium. Github memiliki kemampuan untuk kedua fungsi sebagai sumber pengembangan independen, di mana seseorang membangun proyek-proyeknya, kemudian berbagi dengan publik, yang nantinya juga mampu memberikan pekerjaan ( join proyek ) dengan pengguna lain, tweak, update, selesainya proyek akan memiliki kontribusi besar kepada banyak orang ( pengguna ), atau sebagai open source.

Google menyebutkan GitHub dalam pengumuman penutupan Google Code, dan bahkan memiliki alat ekspor ( untuk proyek proyek anda di google code ) dan panduan ekspor untuk mempermudah migrasi proyek anda dari Google code ke GitHub. GitHub memiliki pedoman bagaimana seorang calon pengembang memulai akrab dengan fitur terbaik GitHub. Ada banyak fitur sebagai bahan pembelajaran yang akan menghemat waktu dalam jangka panjang.


CodePlex

Hosting Alternatif Selain Google Code untuk Proyek Open Source


CodePlex adalah open-source untuk proyek hosting Anda yang dipersembahkan Microsoft. Ini adalah Web yang tepat untuk ribuan proyek populer, dan sementara banyak ( atau sebagian besar, bisa dibilang ) harus dilakukan dengan ekosistem ( yang terkait dengan ) Windows, bukan berarti bahwa aplikasi mobile atau proyek lintas-platform tidak diterima. Account gratis, dan Anda dapat membangun proyek opn source dalam setiap bahasa ( peng-kodean ) untuk platform apapun yang Anda pilih. Anda bisa mencoba coba CodePlex, CodePlex juga memudahkan Anda dalam membuat proyek-proyek dengan menggunakan bantuan, atau tim CodPlex akan membantu mencarikan solusi jika terjadi permasalahan, sehingga sebuah proyek mampu untuk berkontribusi. Seperti repositori kode yang baik, CodePlex menawarkan fitur seperti kontrol versi, wiki built-in dan dukukan FAQ, pelacakan masalah, homepage proyek, dan banyak lagi.


BitBucket

Hosting Alternatif Selain Google Code untuk Proyek Open Source


BitBucket adalah repositori kode yang memiliki nama besar bagi ribuan proyek dan pengembang. Didirikan oleh Atlassian ( perusahaan issue tracking software Jira dan layanan chatting HipChat), BitBucket juga layanan hosting untuk proyek-proyek open source dan coding populer dan Google memiliki panduan migrasi dengan ( tool ) alat yang dapat Anda gunakan untuk memindahkan proyek Anda dengan cepat.

Account BitBucket Gratis !, Namun Anda mendapatkan repositori kode terbatas, Namun Anda masih memiliki banyak ruang untuk membangun proyek-proyek Anda walau dengan space terbatas. Ketika Anda mendapatkan layanan gratis dari BitBucket namun Anda bisa membuat maksimal 5 tim untuk sebuah proyek. BitBucket juga memiliki integrasi dengan Jira, sehingga fitur pelacakan masalah diurus oleh Jira.


Launchpad

Hosting Alternatif Selain Google Code untuk Proyek Open Source


Launchpad adalah kolaborasi antara Ubuntu ( software platform ). Launchpad adalah home dari Unity, Docky, dan beberapa utilitas Linux populer lainnya. Sebagian besar proyek host di Launchpad dikembangkan oleh dan dibangun untuk komunitas Linux, tapi tidak berarti Anda tidak bisa menggunakan Launchpad, karena Launchpad telah built-in tools dan ini benar-benar untuk digunakan gratis.


SourceForge

Hosting Alternatif Selain Google Code untuk Proyek Open Source


SourceForge yang satu ini sebenarnya tidak saya rekomendasikan, tetapi tidak lengkaplah jika alternatif selain Google Code tanpa SourceForge . SourceForge sebelumnya ditinggalkan oleh pemiliknya berikut staf admin selama bertahun-tahun, yang kemudian dioperasikan oleh sekelompok relawan dan admin namun masih menjadi momok bagi pengguna kala itu karena "proyek" yang sarat dengan malware, atau lebih buruk dari itu. Namun kemudian, pengguna menemukan Sourceforge memulai bundling download dengan adware di semua installer-nya.

Meski begitu, SourceForge masih salah satu repositori kode paling populer di web, dan menawarkan manajemen ( coding ) kelas dunia, masalah-pelacakan, versi, dan kolaborasi tool. Ada banyak proyek besar dan populer yang masih menggunakan situs SourceForge. Google memiliki panduan untuk bermigrasi ke SourceForge, dan SourceForge memiliki panduan sendiri untuk importi code yang bertujuan untuk memuluskan proses migrasi tersebut.


Berikut ini layanan lain yang perlu dipertimbankan juga

Ini mungkin juga bisa disebut sebagai hosting untuk proyek-proyek open source dan coding, yaaa sebagai pilihan alternatif untuk Google Code selain yang saya sebutkan di atas :

۞GitLab: Jika Anda tertarik untuk menjalankan produksi kode sendiri, GitLab bisa dijadikan tempat alternatif proyek coding Anda. Yaaa kendalanya mahal di lisensi -nya, jadi bersiaplah untuk membuka dompet sebagai budget premium atau lisensi. GitLab akan menjadi home code produksi untuk publik dan pribadi Anda sendiri di server GitLab secara gratis (seperti layanan web lain. GitLab menangani serius untuk semua proyek Anda karena mereka ingin menjadi lebih baik dari GitHub.

۞CodeBase: Codebase dengan layanan account gratis yang membatasi Anda dalam satu proyek, namun satu proyek dilengkapi dengan manajemen tool dan tool  manajemen proyek yang kuat juga. Tool ini dirancang agar membuat Anda ketagihan dan kembali merencanakan proyek berikutnya dengan bayaran atau penghasilan.

۞Beanstalk: Git Sederhana yang elegan dan Subversion hosting yang mendukung luas ke server Anda atau dalam lingkup web lain seperti AWS, DreamObjects, Rackspace, Heroku, dan lain-lain. Ideal untuk pengembangan web, Soal Harga masih dalam batas wajar lha.

Ditutupnya Google Code, bukan menjadi halangan untuk membangun proyek proyek coding Anda , karena banyak  pilihan dan alternatif yang disesuaikan. Kebanyakan orang dari Google Code mungkin cenderung untuk memilih GitHub atau SourceForge, mengingat popularitas-nya, tetapi Anda tidak perlu merasa mereka saja yang mampu memberikan layanan terbaik. Ada banyak pilihan, baik yang gratis atau berbayar dan yang pasti menjadi salah satu yang terbaik untuk proyek Anda.

Semoga bemanfaat….