Selamat datang di Kios-Tutorial

Cara Mudah Membuat Kotak Admin Dibawah Postingan

Saturday, December 27, 20141komentar

Kotak Admin - Beberapa bulan yang lalu saya ingin sekali membuat pesan dibawah postingan secara otomatis. Sampai akhirnya mendapatkan cara tersebut yang akan saya bagikan dalam uraian di bawah ini. Mungkin untuk beberapa blogger masih bertanya-tanya tentang kotak admin, silahkan dibaca review pribadi saya tentang kegunaan kotak admin dibawah ini :
  • Dengan memberikan kotak admin, blog kita terlihat lebih indah dan rapi.
  • Otomatis akan membuat auto link artikel kita.
  • Kita menjadi komunikatif dengan pembaca.
Cara Mudah Membuat Kotak Admin Dibawah Postingan

Nah, dari review saya diatas dapat dipastikan blog kita akan lebih baik di mata google. Jika kalian berminat silahkan ikuti langkah-langkahnya dibawah ini :

1. Masuk ke akun blogger kalian
2. Pilih Template lalu Edit Template
3. Cari kode berikut ]]></b:skin> 
4. Copy HTML Code dibawah ini dan Paste tepat diatas ]]></b:skin>

/* kotak admin kios-tutorial.tk */
.admin-tulisan{display:block;width:aut
o;background:#CFE2E0;border:2px solid
#fff;box-shadow:0 1px 3px
#000;-moz-box-shadow:0 1px 3px
#000;-webkit-box-shadow:0 1px 3px
#000;padding:0;margin:30px 0 10px
0;font:normal 12px Arial,
Sans-Serif;color:#222;}
.admin-tulisan
.kontainer{padding:5px;}
.admin-tulisan
h4{background:#8A9C04;border:none;bord
er-bottom:1px solid
#699019;color:#fff;text-transform:norm
al;text-shadow:0 1px 0 rgba(0, 0, 0,
0.4);font:bold 12px
Arial,Sans-Serif;padding:5px
10px;margin:0 0 0 0;display:block;}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan
img{width:70px;height:70px;margin:0
10px 0 0;float:left;border:1px solid
#954B02;padding:2px;background:#C36702
;
box-shadow:none;-moz-box-shadow:none;-
webkit-box-shadow:none;margin:
0px;border: 5px solid
#eee;-webkit-box-shadow: 4px 4px 4px
rgba(0,0,0,0.2);-moz-box-shadow: 4px
4px 4px rgba(0,0,0,0.2);box-shadow:
4px 4px 4px
rgba(0,0,0,0.2);-webkit-transition:
all 0.5s ease-out;-moz-transition: all
0.5s ease;-o-transition: all 0.5s
ease;-webkit-transform:
rotate(-7deg);-moz-transform:
rotate(-7deg);-o-transform:
rotate(-7deg);}
/* kotak admin kios-tutorial.tk */

**
- warna MERAH untuk merubah warna background
- warna BIRU untuk merubah warna border
- warna HIJAU untuk merubah warna tulisan

5. Kemudian cari kode <div class='post-footer'>
6. Copy dan Paste HTML Code dibawah ini diatas kode <div class='post-footer'>

<!-- Kotak Admin kios-tutorial.tk -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='admin-tulisan'>
    <h4>Creatif By : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> | Kios-tutorial.tk</h4>
    <div class='kontainer'>
    <img src='URL Image kalian'/>
    Terima Kasih telah membaca artikel <a expr:href='data:post.url'><data:post.title/></a>. Yang ditulis oleh <data:post.author/> .Pada hari <data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, mohon sertakan <blink><strong>sumber link asli.</strong></blink> Kritik dan saran dapat anda sampaikan di komentar, Trimakasih
    <p>
<textarea cols='57' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='
http://www.kios-tutorial.tk/2014/12/cara-mudah-membuat-kotak-admin-dibawah-postingan.html' target='_blank'>:: Get this widget ! ::</a></span></p>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Kotak Admin kios-tutorial.tk-->

**
- warna MERAH ganti dengan nama blog kalian
- warna BIRU adalah URL foto atau gambar kalian
- warna HIJAU ganti kata-kata sesuai selera kalian


Kalian bisa merubah tampilan diatas dengan kreasi dan imajinasi masing-masing. Selamat mencoba. Baca juga : Color Code Generator

Terima kasih sudah berkunjung dan meluangkan waktu untuk membaca artikel

Cara Mudah Membuat Kotak Admin Dibawah Postingan

Tutorial Tips & Trik Photoshop | Illustrator | Cinema 4D | Blog & Seo

Share this article :

+ komentar + 1 komentar

March 11, 2015 at 11:39 AM

Terimakasih infonya Gan (y)
Ini yang sedang saya cari-cari
http://kedaijellygamatgoldg.com/
http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/

Post a Comment

- Maaf, komentar LINK AKTIV / IKLAN akan saya HAPUS
- Komentar sara / spam akan saya hapus
- Jika ada link gambar yang mati laporkan disini
- Berkomentarlah dengan bijak sesuai dengan artikel
- Komentar anda merupakan undangan buat saya

 
Support : Cara Gampang | Creating Website | Johny Template | Mas Templatea | Pusat Promosi
Copyright © 2013. Tutorial Tips & Trik - All Rights Reserved
Template Created by Creating Website Re-Design by Kios
Proudly powered by Blogger