MARI MENGEMBALIKAN KREDIT POWERED BY BLOGGER

HTML-CSS
kredit gambar: pexel.com
Saya sadar bahwa saya hanya bisa bermain sebagai seorang yang sedang mendesain, sangat absurd mengaku sebagai "pencipta" Itulah alasannya mengapa pada footer dibawah blog ini dengan bangga saya kembalikan kredit : "Powered by Blogger" pada tempatenya kembali setelah sempat saya hapus secara parmanen! (Saya mengkopi kembali sumber aslinya dan meng"embed"-nya kembali pada tempat dimana seharusnya dia berada)

Jadi dengan membuat layout yang dapat ditampilkan menjadi bagian dari setting dasbor blogger, anda dapat mengklaim template besutan anda yang dibuat berdasarkan tema default blogger sebagai template yang telah mandiri. Template Soho yang sedang diperagakan oleh editblogtema ini adalah SOHO asli dari template bawaan blogger pada saat anda pertama kali membuat blog. Namun tentu saja sudah jauh berbeda, karena:
  • Saya telah membuat beberapa section baru, plus widget baru yang tidak akan terdapat sebelumnya secara default pada template SOHO. Misalnya bagian header yang di dominasi warna hitam memiliki menu navigasi simple dan efektif plus kotak pencarian hanyalah hasil modifikasi kombinasi edit HTML dan kostumisasi Blogger Theme Designer. Jadi menu tersebut terbuat dari elemen dan material asli SOHO. Kita hanya perlu membentuknya sampai menghasilkan nilai estetika. Sebagaimana aslinya header ini memiliki fitur "sticky"
  • Kemungkinan saya telah memodifikasi, mengedit dan memanipulasi CSSnya untuk membuat tampilan yang berbeda.
  • Footer, saya telah membuat section untuk memanfaatkan widget yang telah tersedia di dalam template SOHO menjadi atribut menarik pada bagian footer, tinggal anda mengembangkan kreatifitas untuk membuatnya lebih menarik.
Perhatikan gambar tampilan antarmuka template SOHO, yang kiri adalah tampilan laptop atau tablet 9.7 inch keatas sedangkan yang kanan adalah tampilan pada layar smartphone. Sample saya seperti terlihat pada gambar:
Tampilan laptop dan mobile SOHO
Tampilan laptop dan mobile SOHO
Oleh karena pembuatan bagian header tidak terlalu rumit, cukup hanya dengan cara memindahkan bagian section dan widget yang sudah ada, misalnya:
  • Untuk membentuk menu navigasi cukup manfaatkan page atau laman mandiri blog yakni dengan memanfaatkan linknya.
  • Agar bagian header terlihat terintegrasi dengan navigasi menu, cukup memberikan warna yang sama pada bagian widget header dan widget laman dan tentu saja jika perlu menggeser section berikut widget laman mendekati header. Untungnya struktur ke empat template terbaru blogger disusun sedemikian simple sesuai dengan urutan lazim yang dapat kita fahami, misalnya hal yang berurutan: 1,2 ,3, 4 dst..
  • Ya satu hal yang harus saya ingatkan kepada para pencinta template redesain: Template terbaru blogger sudah support layout 3 melebihi template template premium pada umumnya, bagi yang memiliki sedikit pengatahuan dan trik CSS, template terbaru sangat mudah di modifikasi, di bentuk sesuka hati tanpa batas.
Dan ingat:
  • GOOGLE TIDAK MELARANG PENGGUNA MEREDESAIN, MENGEDIT, MEMODIFIKASI TEMPLATE TEMPLATENYA. Terbukti dari halaman bloggerhelp, pihak Google dengan jelas dan terang memberikan cara dan teknik HTML dasar kepada pengguna tentang cara memodifikasi tema tema blogger langsung dari sumber kode kodenya. Tapi harus ingat para pembuat template tidak akan bisa berbuat apa apa kalau platform bloggernya tertutup. Jika sumbernya tidak terbuka.
Jadi tunggu apalagi, jika anda tidak ingin membeli template premium, percayalah template ini sesungguhnya sangat premium. Template gratis yang dapat memberikan anda kepuasan dalam bereksplorasi. Saya senang beberapa teman sukses ngeblog dengan konsisten menggunakan ide template bawaan blogger yang aman dan terjamin orisionalitasnya. Orisionalitas adalah sebuah klaim yang terintegrasi. Tidak ada pengakuan yang mengklaim: Ini template asli buatan saya! Padahal saya hanya memodifikasinya.

MENGEMBALIKAN KREDIT "POWERED BY BLOGGER"
Akhirnya saya dapat mengembalikan dan menempatkan rasa hormat saya kembali kepada pemegang hak Cipta: Google Blogger. Mengingat:
  1. Semua template dibuat berdasarkan basis desain platfom pemiliknya: Blogger.
  2. Dibuat dengan material dan elemen yang sama
  3. hanya style yang membedakannya. Anda hanya bisa bermain sebagai seorang desainer, sangat absurd mengaku sebagai "pencipta" Itulah alasannya mengapa pada footer dibawah dengan bangga saya kembalikan kredit : "Powered by Blogger" pada tempatenya kembali setelah sempat saya hapus secara parmanen! (Saya mengkopi kembali sumber aslinya dan meng"embed"-nya kembali pada tempat dimana seharusnya dia berada)
  4. Dengan rendah hati saya mengakui segala kekurangan saya, namun demikian saya akan mengimprovisasi kemampuan desainer saya sampai batas manusia dapat melewatinya.
  5. Dan terimakasih pada teman teman yang selama ini mempercayai dan menggunakan template template redesain saya - walaupun banyak kekurangan dan telah saya tambal sulam (update teratur) namun perkembangan kemajuan teknologi web ternyata terus berubah semakin maju - hal yang juga wajib bagi saya untuk tetap membuka mata sepanjang waktu.
Footer editblog SOHO
Saya termasuk orang yang alergi terhadap penggunaan JavaScript pada saat hal itu terbukti memperlambat kecepatan. Jadi saya mencoba memetik keuntungan dari melimpahnya CSS style pada keempat template blogger terbaru. Anda boleh menghitung elemen DOM pada empat template blogger terbaru seperti Contempo, SOHO, Emporio dan Notable. Luarbiasa minim sekali. Saya juga sangat senang karena hampir tiadanya JavaScript  dan juga penggunaan font awsome pada keempatnya.

CSS adalah elemen dan material utama, ini sungguh berbeda dengan template template tua walaupun premium. Misalnya apa yang terjadi pada saat anda menginginkan sidebar sticky? Umumnya desainer menggunakan perintah action melalui JavaScript. Tetapi coba periksa header sticky pada keempat template baru, apakah itu JavaScript? Tidak! Itu adalah "anyaman" CSS yang rapi kedalam HTML! Saya hanya memiliki kemampuan dasar untuk melakukan rekayasa agar semua fungsi ini dapat saya duplikat pada sebuah widget misalnya, tapi saya tidak, tetap saja pada akhirnya menjumpai saran klasik: Pakai JavaScript!

Ini yang terjadi ketika saya membuat Footer editblog, dan pada footer inilah seharusnya kredit Powered by Blogger ditempatkan: 
HTML:
<div class='editsub'>
<div class='editsocial-icons'>
  <ul>
  <li class='social-facebook'><a href='https://m.facebook.com/AnissaSufyan/?ref=bookmarks' target='_blank' title='Facebook'>Facebook</a></li>
   <li class='social-twitter'><a href='[Twitter url]' target='_blank' title='Twitter'>Twitter</a></li>
   <li class='social-gplus'><a href='https://www.instagram.com/sufyan_yaan/' target='_blank' title='Google+'>Instagram</a></li>
   <li class='social-pinterest'><a href='https://pin.it/5ennxi2waf22f5' target='_blank' title='Pinterest'>Pinterest</a></li>
    <li class='social-rss'><a href='https://news.google.com/news/rss' target='_blank' title='RSS'>RSS</a></li>
  </ul>
 </div>
            <center><b:section id='bagiankaki1'>
  <b:widget id='Attribution1' locked='false' title='' type='Attribution' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='copyright'><![CDATA[Hak Cipta@2019.<a href="https://www.editblogtema.net">editblogtema</a>]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main' var='this'>
  <div class='widget-content'>
    <div class='blogger'>
      <a expr:href='data:bloggerUrl' rel='nofollow'>
        <b:include name='flatBloggerIcon'/>
        <b:message name='messages.poweredByBlogger'/>
      </a>
    </div>

    <b:if cond='data:imageAuthor'>
      <div class='image-attribution'>
        <b:if cond='data:imageAuthor.url'>
          <b:message name='messages.templateImagesByLink'>
            <b:param expr:value='data:imageAuthor.url'/>
            <b:param expr:value='data:imageAuthor.name'/>
          </b:message>
        <b:else/>
          <b:message name='messages.templateImagesBy'>
            <b:param expr:value='data:imageAuthor.name'/>
          </b:message>
        </b:if>
      </div>
    </b:if>

    <b:if cond='data:copyright != &quot;&quot;'>
      <div class='copyright'><data:copyright/></div>
    </b:if>
  </div>
</b:includable>
  </b:widget>
</b:section></center>
       
<center><small><b:section id='FollowByEmail1'/></small></center>
        </div></div>
      </div>

CSS:
<style type='text/css'>
.editsub {
    background-color: #000000;
    width: auto;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}
.editform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px &quot;trebuchet MS&quot;,&quot;Tahoma&quot;;
}
.editemailform {
    width: 240px;
    margin: 10px auto;
}

#editemailbox {
    background-color: #007ad6;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}

#editemailbutton {
    background-color: #007ad6;
    border: 1px solid #007ad6;
    color: rgb(255, 255, 255);
    width: 240px;
    font: bold 16px &quot;trebuchet MS&quot;,&quot;Tahoma&quot;;
    padding: 15px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
}

#editemailbutton:hover {
    background-color: #007ad6;
    border: 1px solid #BF4A49;
}

.editsignup-form {
    margin-top: 15px;
}

.editsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}

.editsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}

.editsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 2px !important;
}

.editsocial-icons ul li::before,
.editsocial-icons ul li::after {
    display: none !important;
}

.editsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
     background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRKfdEdu8lbahyphenhyphenam8CHXgA-qN02vxzq4jlpcXj8BQAIk_VfnqZRHOqlB9PnXR3WtAWQW5PY9rFUUrbZWhgKj-bRa6nVaIU_dTEkcs3tZsM5j4PKLeJVXs73fQQ4VHvfYPfY6VHR5OgZpt/s1600/sprite2.png&quot;) no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s;
    width: 34px;
}

.editsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}

.editsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998;
}

.editsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}

.editsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced;
}

.editsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}

.editsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39;
}

.editsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}

.editsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027;
}

.editsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}

.editsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12;
}

.cd-top--is-visible { // back-to-top button visible
  visibility: visible;
  opacity: 1;
}
body {
  font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
Dimana meletakannya? Supaya jangan bingung sebaiknya ikuti tutorial saya pada artikel:

CARA MEMBUAT FOOTER STYLIST UNTUK TEMPLATE CONTEMPO, EMPORIO, SOHO DAN NOTABLE

Dan setelah anda menerapkannya cobalah masuk kepengaturan blogger, akan terlihat section layout bertambah sebagai berikut:
Ya bagian kaki! Jika suatu ketika anda membagikan template ini pada teman teman anda mereka tidak perlu mengedit HTML blog untuk mempercantik footer blog Contempo, Soho, emporio dan Notalbe cukup dengan cara meletakan widget kedalam "bagian kaki" dan save template melalui pengaturan blogger saja. Masalah footer ini akhirnya saya pecahkan dengan cara sederhana.

Saya sarankan anda memanfaatkan widget "text" dan menuliskan misi blog anda boleh menambahkan tag <small>...</small> untuk memperkecil huruf dan menambahkan atribut <p>....</p> untuk membentuk list. Tempatkan dibagian kaki yang telah saya buatkan widgetnya. Jika ingin templatenya silahkan request saja.

Dan juga jika anda perhatikan dengan seksama: Saya tidak melibatkan JavaScript untuk pembuatan footer ini, cukup hanya HTML CSS hasilnya cukup cantik, ringan dan mulus....


4 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. hehe.... Berasa dosa sendiri ya sempet ngilangin kekuatan blogger....
    Makanya segera sujud minta ampun mang.... wkwkwk

    BalasHapus
  2. hehe... setuju dengan artikelnya. semoga dapat membuat banyak orang sadar dengan tidak menghilangkan penciptanya, jika kita ingin dihargai maka kita juga harus menghargai.

    BalasHapus
    Balasan
    1. Ya seperti bertahun tahun telah saya lakukan

      Hapus
Lebih baru Lebih lama

Formulir Kontak