Hover me<="">

MEMBUATCOMMENTAR GULIR

Blogger memperkenalkan balasan komentar berulir untuk semua blog blogger awal Januari 2012.The pilihan untuk langsung membalas ke komentar di Blogger adalah salah satu permintaan paling populer oleh Blogger users.So update besar tetapi gaya komentar standar blogger masih sepi hambar dalam posting ini kita memiliki tutorial untuk menambahkan beberapa gaya ke Blogger Css gaya comments.The kita menambahkan tempat komentar-komentar dalam gelembung pidato bulat dengan panah ke avatar penulis,. link balasan juga highlighted.Take melihat demo di bawah ini, gulir ke komentar ..
CARANYA HANYA MENAMBAHKAN CSS BERIKUT :

Step 2. CARI KODE

]]></b:skin>

Step 3. Copy and Paste SEBELUM  ]]></b:skin>

/* Start Comment Style Code http://www.spiceupyourblog.com */

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}

.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}

.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}

.comments .comments-content .inline-thread{padding:0}

.comments .comments-content .comment-thread{margin:8px 0}

.comments .comments-content .comment-thread:empty{display:none}


.comment-replies{margin-top:1em;margin-left:40px;background:#fff}

.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}

.comments .comments-content .comment:first-child{padding-top:16px}

.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}

.comments .comments-content .comment-body{position:relative}

.comments .comments-content .user{font-style:normal;font-weight:normal}

.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}

.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}

.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}


.comment-content{margin:0 0 8px;padding:0 5px}

.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}

.comments .comments-content .owner-actions{position:absolute;right:0;top:0}

.comments .comments-replybox{border:none;height:230px;width:100%}

.comments .comment-replybox-thread{margin-top:0}

.comments .comment-replybox-single{margin-top:5px;margin-left:48px}

.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}

.comments .thread-toggle{cursor:pointer;display:inline-block}

.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}


.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}

.comments .thread-chrome.thread-collapsed{display:none}

.comments .thread-toggle{display:inline-block}

.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}

.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}

.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiId_tw4LL9TQ6yFPoAvSf9okEtwSoIzdrdr0baEfWluk9SiUkLCWvdcmqFfuBfnqh4_Z96Sx1bDP06V2mgNbu3YsVQCxq505AZOW-y8W-iYgrDwAyl_rUsjjfatx03SCqxed6eWEhCQac/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}

.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}

.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}


@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

/* End Comment Style Code http://www.spiceupyourblog.com */

Step 4. SIMPAN

spoiler this :

.profile-img {

  float: left;

  margin: 0 5px 5px 0;

  padding: 4px;

  border:3px solid #289728;

}

.profile-img:hover {

  border:3px dashed #3B3A3B;

}

.profile-data {

  margin:0 10px 20px 10px;

  padding:0;

  font: bold 10pt "ms sans serif", verdana,Arial;

  color:#289728;

  line-height: 1.6em;

  text-align:left;

  text-transform:lowercase;

}

.profile-data:hover {

  color:#3B3A3B; }

.profile-datablock {

  margin:.5em 0 .5em;

}

.profile-datablock:hover {


background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1RJtsQneN2Py3gypP6QxFRNWBDeI474R6kN4BesYLEBd7eiGSPeu8hJZ00lMBWMGQM0xP6FM6wlQmeipx73TA5gh_UzbtSuGspVNPqsDtxW85aCGaykRZyWipYK4OKNb9UMsmEz4jHYQ/s320/admin.png)
no-repeat bottom right ;

}

.profile-textblock {

  color:#333;

  margin: 0.5em 0;

  line-height: 1.6em;

  padding:5px 0 5px 0;

  border-top:2px solid #289728;
  border-bottom:2px solid #289728; }

.profile-link {
display:none;
}

HTML EDITOR

 GENERATORS

Preview the widgets you are going to add to your site, You can also customize your widgets through this EDITOR

<style><br /> <br /> Add CSS Code Here<br /> <br /> </style><br /> <br /> <br /> Add HTML Code Here

get coloured html code

Many Times while customizing widgets you need to change colors of the links,

borders etc. But we cannot add just text like "BLUE" or "GREEN", every color has a specific code for it. So we won't need to search for the codes anymore, just use this simple color code generator to get the codes of the color you want. This widget is just like the one that Photoshop has, In the label "HEX" you get the color code like "#FFFFFF" or something copy that code (CTRL+C) and paste it in while customizing your widgets, the customization tips are on the tutorials itself. So enjoy this generator. Happy Blogging.

 

GET HTMl colour code

Presenting the rounded corner generator for images in blogger blogs and other websites, this is a simple generator which gives a shape to your images. Normally our images are in a shape of square or rectangle, but now we are going to make their edges round. In this post I am not going to post any HTML or css as we already have a generator which will do everything for you. You just need to add an image to from your computer by clicking the "BROWSE" button or pasting the image url in the second row. So enjoy your images with rounded corner generators. You will  be redirected to a web page where you need to adjust some options like the radius of the corner, background color, height and weight.

Image:
or URL: