Blogroll

Wednesday, January 11, 2012

[How To] Add Widget

3:31 AM    No comments
[How To] Add Widget


Salam Super. Hi bloggers, this time Ditrama.blogspot.com will explain how to Add Widget on any part ofyour desired example would add the widget at the bottom below the header or footer. Here I'll explain and I will explain how that is still struggling in the CSS on the blog and the code isinvoked through HTML code. Directly to the explanation. Cegidot:

  1. Sign in to Blogger Account
  2. Click Click Dashboard Design
  3. Click on Edit HTML
  4. Press Ctrl + F Then Find Code ]]></ b: skin>
  5. After That CSS Code Copy Above Code ]]></ b: skin>
  6. Then Copy Code Below HTML Code Set Pursuant <body> And Desire Buddy
  7. After That Click Save Template

CSS
/* Add A Gedget Widget By npgprogram.blogspot.com*/
.npgprogram1 a { color:#293A28; text-decoration:none;}
.npgprogram1  a:hover { color:#FFFFFF; text-decoration:underline;}

.npgprogram1  h2 {
width:350px;
height:54px;
color:#FEB945;
font-family:Times New Roman, Times, Serif;
font-size:18px;
line-height:36px;
font-weight:bold;
letter-spacing:0px;
font-variant:normal;
margin:-18px 0px 0 0px;
padding:10px 0px 0px 10px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg17BsNOy8jqVzZvIDPt_7nQSWqaTRu0dpRmsU4Qg0shciWfRPHgUwD6v3fXxut2CeZOuDn5byiaX12W9ujkmTouD2R7lmdUZ8kgiEqtbgzLqu5ekL-Nt_rU5Fvny1RvaDCMy7zed637BAr/s1600/bg_sb_head.png') no-repeat left top;
}

.npgprogram1 ul {
position:relative;
list-style-type:none;
margin:0;
padding:0;}
.npgprogram1 .widget {
list-style-type:none;
margin:0px 0px 0px 0px;
padding:0px 0px 40px 0px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0FBhgQGpEibioeRtmOUn-OKy48phzdVs2GRbVqliOTHm_L0BImINuhaJQoe_Dc4bNpA_4k0hcww_NTu9m1IpKtJyPFWYPmJDzUFPpLNzfOwvZ1ATjNCXsIWmDu3_s460QmGCBnStTXPY/s1600/bg_sb_btm.png') no-repeat left bottom;
}
.npgprogram1  ul li {
list-style-type:none;
line-height:1.6em;
padding:0px 0px 0px 15px;
margin:0 0 0 0px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ERq2RqAgStKrM2J6nowFAymaL_0w592PX4wfk0n6EQtoZeOCnfbrnz91EdD7_NUY9EmWcv0oLBgKzank23JdSVF81lsKsASBxmsAYK-dzIs5_iOIS8Ja-GU7yARbdToEznvDgATVmuKu/s1600/bg_sb_arrow.png') no-repeat 0px 5px;
}

.npgprogram1 .widget-content{padding-left:10px;padding-right:10px;}
/*End Add A Gedget Widget By npgprogram.blogspot.com*/
HTML

<---Start by npgprogram.blogspot.com--->
<div id='npgprogram1-container'>
<div id='npgprogram1' style='width: 300px; float: right; margin:0; '>
<b:section class='npgprogram1' id='npgprogram-1' preferred='yes'/>
</div>
<div class='clear'/>
</div>
<---End by npgprogram.blogspot.com--->

Hopefully this article can be useful to readers and all people. Please copy-paste this article and do not forget to include the url address of his example  http://npgprogram.blogspot.com/2012/01/how-to-add-widget.html. And do notforget to commentand sign the guest book.

By: npgprogram.blogspot.com

0 Comments:

Post a Comment

Semoga artikel yang diposting npgprogram.blogspot.com memberikan banyak manfaat. Budayakan komen sesuai topic artikel diatas. Meninggalkan komen merupakan hal positive yang akan memberikan manfaat. ^_^

Subscribe to: Post Comments (Atom)