Cara membuat kotak Admin Blog

Cara membuat kotak Admin Blog

Cara membuat widget author box #kotak admin blog. Pada kesempatan kali ini saya akan mencoba membagi pengetahuan tenatang cara membuat profil mengenai penulis blog, walau pun sebenarnya Blogger telah menyediakan widget untuk pembuatan profil default pada blog.

Semoga widget yang akan kita buat ini dapat menambah daya tarik terhadap blog yang telah kita disain

1. Login ke akun blog anda
2. Pada halaman dashboard, masuk kebagian Tata Letak
3. Klik tambah gadget diposisi widget About The Author Box ini ingin dipasang
4. Pilih HTML dan masukkan kode berikut :

<div class=kotak>

  <div id=myprofile>

  <img  id="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xn5mNVQgEK-H6_NeJPWqd0d5LeI59xjy6_6XzuDUWNtna2Kxuw7jHh3co27gOS-OKytF4frfv6OJcAnjk6rHZdEYEs2ACpcQ9selOvyywlLszWXH9D-DJwyh65vQPIpKOB1nIS_PHxA/s320/brando-m.PNG" align="left"/> Hallo guys, kenalkan nama saya Brando Mewo, add sosial network saya, yah !?..<br/> <a style="color:#666;"  href="http://www.seocips.com" rel='nofollow' target='_blank'> Read More..</a><br/>

    <div class='touchme'><!--Google Plus--> <a class='googleplus' href="https://plus.google.com/u/0/103662134309614692674" rel='external nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="https://www.facebook.com/seocips" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="https://twitter.com/seocips" rel='external nofollow' target='_blank' ></a>

</div></div></div>

<style>

   #myprofile{border:1px solid #ddd; margin:0;padding:10px; overflow:hidden;background:#333;border:1px solid #1e1e1e;border-radius:4px;color:#ddd;box-shadow: 2px 2px 2px 2px #000; }

   #profile{ border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height:150px;width: 120px;border-radius:4px;} #profile:hover { border:2px solid #ccc;cursor:pointer;text-align:justify; }

   .opacity:hover  {  -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; }

   .touchme a { display:block;height:50px;width:37px;padding:0 5px;margin-top:10px; float:left;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOesPjYjaup02rDYSfhSnHqgQwYwUpfqzasmB5ox9yNPAYGQldfZnmd0v4Ep7e8F6CBWB3jepjkmkRr1HpFKs8YE2FkkZj0zn12xNSx9oDM3WfIWLstv5lhhzF8Cud_Vx6K1Akt3oU2_M/s1600/Sharing+Touch+Me.png) no-repeat;} .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; }

  </style>

5. Save dan lihatlah hasilnya.

Share ke:
Facebook Google+ Twitter

Read more »

Cara Membuat Recent Post Bergerak

Cara Membuat Recent Post Bergerak

Cara Membuat Recent Post Bergerak Terbaru - Kali ini saya akan membagikan tutorial tentang Cara Membuat Recent Post Bergerak . Recent Post dalam bahasa Indonesia berarti postingan terbaru/postingan terkini. Tujuan memasang widget Recent Post adalah agar mempermudah pengunjung blog yang ingin melihat postingan terbaru/postingan terkini.

Recent Post biasanya menampilkan sejumlah judul artikel yang belum lama posting yang bergerak kebawah. Contohnya sobat bisa melihat recent post saya yang berada di sidebar kanan.

Berikut ini adalah Cara Membuat Recent Post Bergerak . Tolong perhatikan Tutorial ini baik-baik agar anda dapat langsung mengerti.:

1. Log In di blogger sobat
2. klik tata letak/layout lalu klik tambahkan gadget/add gadget, cari HTML/JavaScript lalu klik.
3. Selanjutnya copy paste kode HTML dibawah ini.
kode 1

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
 
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
 
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>

Opsi script ke 2

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });

</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;

</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>

4. Terakhir Simpan

Sekian tutorial Cara Membuat Recent Post Bergerak Terbaru . Semoga sobat berhasil dalam melakukan tutorial ini.

Share ke:
Facebook Google+ Twitter

Read more »