Merubah Themes BLOGDETIK dengan CSS

15 Nov 2012

Blogdetik

Blogdetik

Siomponk Network: Buat anda yang mempunyai blog di BLOGDETIK, pernah kan melihat themes model lain dari yang telah disediakan oleh pihak BLOGDETIK…??? Sebenarnya itu merupakan Themes Blog yang sudah di EDIT oleh pemiliknya sehingga kelihatan lain dari Themes Bawaan yang telah disediakan oleh BLOGDETIK.

Cara Merubah Themes di BLOGDETIK adalah dengan merubah CSS nya sehingga tampilannya menjadi sedikit beda dari aslinya, dan bisanya memang hanya CSS saja. Jika ada yang menambahkan dengan JavaScript sebenarnya bisa, tapi kemungkinan loading blog jadi sedikit berat. Jadi disarankan merubah nya dengan code CSS.

Nah, kali ini saya akan memberikan 3 CSS untuk 3 Themes di BLOGDETIK
CATATAN:

1. Themes Teenbedroom
gajisampingan.blogdetik.com
DEMO
Feature:

  • Ads Header
  • Logo Image Header
  • No Navbar Blogdetik
  • Ringan Dibuka

Code:

body {
background-color: #FFFFFF !important;
background-image: url(http://www.aussiegameserver.com/Themes/morestyle-expanded/images/bg.png);
background-repeat: repeat !important;
}
/* begin Header */
div.Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 250px !important;
height: 95px!important;
}
div.Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 250px !important;
height: 95px !important;
background-image: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
#wp-admin-bar {display:none !important;}
#wp-admin-bar-right {display:none !important;}
#sponsor {
padding: 5px;
clear: both;
height: auto;
width: auto;
background-color: #EEEEEE;
border: 1px solid #d5d5d5;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#ads125 {
list-style-type: none;
clear: both;
width: 100%;
display: block;
margin: 0px;
text-align: center;
padding-top: 1%;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#ads125 li {
padding: 0px;
list-style-type: none;
display: inline;
margin: 0px;
}
#ads125 img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#sponsor h3 {
margin: 0px;
clear: both;
background-color: #333;
color: #FFFFFF;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
height: auto;
width: auto;
padding-top: 5px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 6px;
}
/* begin Logo */
.logo
{
display : none !important;
position: absolute;
left: 390px;
top: 125px;
width: 610px;
}

h1.logo-name
{
display: block !important;
text-align: left;
}

h1.logo-name, h1.logo-name a, h1.logo-name a:link, h1.logo-name a:visited, h1.logo-name a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
text-decoration: none;
padding:0;
margin:0;
color: #F1EFE4 !important;
}

.logo-text
{
display: block !important;
text-align: left;
}

.logo-text, .logo-text a
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
padding:0;
margin:0;
color: #0A0905 !important;
}

/* end Logo */
/* Start images */
a img
{
border: 0;
}

.article img, img.article
{
border-style: none !important;
border-width: 1px;
border-color: #B7A971;
margin: 1em;
}

.metadata-icons img
{
border: none !important;
vertical-align: middle;
margin:2px;
}

Keterangan:
http://www.aussiegameserver.com/Themes/morestyle-expanded/images/bg.png = gambar background
Logo Blog Header = ukuran 265×99
Ads Header = iklan berukuran 728×90

Pasang code CSS di Widgets Any HTML Blogdetik

2. Themes SimpleScheme Magazine
Themes SimpleScheme Magazine
DEMO
Feature:

  • Simple
  • Ringan dibuka
  • Feature Post Slider
  • Blockquote Cantik
  • No Navbar Blogdetik
  • Ads Ready
  • SEO Themes Style
  • Mirip dengan Detik.Com (versi lama)

Code:

body {
background: #FFFFFF !important;
}
#wrapper {
width: 980px !important;
margin: auto auto !important;
text-align: left !important;
background: #FBF3CB !important;
border: 2px solid #009 !important;
}
#content .recent .o {
background-color: #009 !important;
width: 300px !important;
float: right !important;
margin-left: 60px !important;
margin-bottom: -235px !important;
overflow:hidden !important;
height: 215px !important;
color:#fff !important;
}
#content .recent .o a {
text-decoration: none !important;
color: #FC0 !important;
}
#content {
clear: both !important;
width: 650px !important;
float: left !important;
padding-bottom: 10px !important;
}
#featured {
background: #009 !important;
padding: 10px !important;
margin-bottom: 10px !important;
height: 245px !important;
width: 630px !important;
color:#fff !important;
}
#content .recent .post {
width:300px !important;
padding: 15px !important;
}
#content .recent .post h2 {
font-size: 1.2em !important;
margin-bottom: 10px !important;
}
a {
color: #ff0000 !important;
}
#featured a {
text-decoration: none !important;
color: #FC0 !important;
}
#sidebar .box {
border: 0px !important;
margin-bottom: 10px;margin-right: 5px;margin-left: 5px !important;
}
#sidebar .box h2 {
font-weight: bold !important;
color: #9E3030 !important;
margin: 10px 0px 5px 0px !important;
padding: 3px 10px !important;
border-top: 2px solid #DDC688 !important;
border-bottom: 2px solid #DDC688 !important;
background-color: #FBF3CB !important; }
#sidebar .box ul li a{margin-right:20px !important;
color: #ee0000 !important;
}
#sidebar .box ul li a:hover {
color: #9E3030 !important;
text-decoration: underline !important;
}
#content .recent {
border: none !important;
}
#header .categories {
clear: both !important;
list-style-type: none !important;
height: 25px !important;
border-bottom: none !important;
border-top: none !important;
overflow: hidden !important;
background: #580058 !important;
top:-15px;position:relative !important;
padding-left: 50px !important;
}
#header .categories li {
float: center !important;
}
#header .categories li a {
display: block !important;
padding: 7px !important;
color: #ffcc00 !important;
font-weight: bold !important;
text-decoration: none !important;
border-right: 0px !important;
}
#header .categories li a:hover {
background-color: #003366 !important;
color: #ffffff !important;
}
#header .logo {
clear: both !important;
float: left !important;
padding: 10px 0 0px 20px !important;
top:-65px;position:relative !important;
}
#header .pages {
list-style-type: none !important;
height: 39px !important;
padding-top: 3px !important;
padding-left: 350px !important;
float: left !important;
top:75px;position:relative !important;
background: url(http://detik.net.id/detik/image/sprite_1.gif) 0px -140px repeat-x #950095 !important;
width: 630px !important; }
#header .pages li a {
display: block !important;
font-size: 0.9em !important;
font-weight: bold !important;
text-transform: uppercase !important;
padding: 12px 15px !important;
text-decoration: none !important;
color:white !important;
}
#header {
height: 130px !important;
margin-bottom: 15px !important;
}
#header .logo p {
display:none !important;
}
#header .logo h1 {
font-size: 3em !important;
text-transform: lowercase !important;
}
#header .logo h1 a {
text-decoration: none !important;
text-shadow: #600 2px 2px 3px !important;
}
#header form {
width: 245px !important;
height: 26px !important;
background: url(http://beritalama.blogdetik.com/wp-content/themes/simplescheme/images/search.gif) no-repeat 0 8px !important;
float: right !important;
padding: 8px 30px 0 0 !important;
top:-15px;position:relative !important;
}
.nocomments {display:none !important;}
.logo2 {
width: 245px !important;
height: 26px !important;
float: right !important;
padding: 8px 30px 0 0 !important;
top:-15px;position:relative !important;
}
#content .recent .post img { display:none !important;}
#dsq-content #dsq-toolbar-dropdown a {
display: none !important;
}
#dsq-content a.dsq-toolbar-item:hover{
display: none !important;
}
.dsq-community-box .dsq-toolbar-icon {
display: none !important;
}
blockquote {
width:87% !important;
margin-left:30px !important;
padding:5px 5px 5px 10px !important;
color:#04570a !important;
background:#e3f2e2 url(http://uc.blogdetik.com/288/2888/files/2011/05/bquote.png) no-repeat left top !important;
border:#098303 solid 1px !important;}
#dsq-content .dsq-options span {display:none !important;}
#content .single h3 {display: none !important;}
#featured .details {display: none !important;}
#footer p {display: none !important;}
#wp-admin-bar {display:none !important;}
#wp-admin-bar-right {display:none !important;}

Keterangan:
Pasang Code CSS di Widgets Any HTML Blogdetik.

3. Themes Finews

DEMO
Feature:

  • Simple
  • Ringan dibuka
  • Thumbnail Post
  • No Navbar Blogdetik
  • SEO Themes Style
  • Breadcrumbs Ready
  • Ads Ready

Code:

html, body {background-color: #003060 !important; background:url(http://uc.blogdetik.com/288/2888/files/2011/12/bg.png) !important; background-repeat:repeat !important; font-family:Verdana !important; font-size: 10px !important;}
#home a,#dropmenu .current-menu-item a,#dropmenu .current_page_item a,#dropmenu .menu-item-home a{background-image:none!important}
#header {
background:url(http://uc.blogdetik.com/288/2888/files/2012/08/b7bc9942619288ea46caa27209f8af71_head-blog.png) !important;
background-repeat:repeat !important;
height: 82px !important;}
#siteinfo h1 {font-size: 5em !important; font-family:Georgia !important; font-weight: bold !important;}
#siteinfo h2 {font-size: 1em !important; font-family:Verdana !important; font-weight: bold !important;}
#siteinfo a:hover {text-decoration: none !important;}
.current {background-color: transparent !important;}
.pages {background-color: transparent !important;}
.wp-pagenavi a {background-color: transparent !important;}
.wp-pagenavi a:hover {background-color: transparent !important;}
#post-navigator .alignleft a, #post-navigator .alignright a {background-color: transparent !important;}
#post-navigator .alignleft a:hover, #post-navigator .alignright a:hover {background-color: transparent !important;}
#wrapper {width: 900px !important; background-color: #F7F7F7 !important;}
.post-content-single h2 {font-family:Oswald !important;}
.featured-cat-meta h2, .related-cat-meta h2 {font-family:Oswald !important;}
.post-meta h1#single {font-family:Oswald !important;}
#sidebar {width: 340px !important;}
a:link, a:visited, a:active {color: #088A08 !important;}
#topnav {
background-image: url(http://uc.blogdetik.com/288/2888/files/2012/02/navbg1.png) !important;
background-size:898px 38px !important; background-repeat: no-repeat !important;}
#topnav #date {font-size: 10px !important; font-style: normal !important;}
#content {
background-image:url(http://detik.net.id/wolipop/image/bg.gif) !important; background-repeat:repeat !important; background-position:left top !important; padding:0 !important;}
#searchbox {background-color: #0B610B !important;}
.featured-cat-entry h5, .related-cat-entry h5 {background-color: #0B610B !important;}
#breadcrumbs {
font-style: normal !important;
color: #A4A4A4 !important;
background-image: url(http://uc.blogdetik.com/288/2888/files/2012/02/navbg2.png) !important;
background-repeat: repeat !important;
border-bottom-style: dash !important;
margin: 0px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-left: 7px !important;}
#footer {
background-image: url(http://uc.blogdetik.com/288/2888/files/2012/02/navbg2.png) !important;
background-repeat: repeat !important;
background-color: #3B240B !important;}
blockquote {
width:90% !important;
margin-left:30px !important;
padding:5px 5px 5px 10px !important;
color:#04570a !important;
background:#e3f2e2 url(http://uc.blogdetik.com/288/2888/files/2011/05/bquote.png) no-repeat left top !important;
border:#098303 solid 1px !important;}
#wp-admin-bar {display:none !important;}
#wp-admin-bar-left {display:none !important;}
#wp-admin-bar-right {display:none !important;}

Keterangan:
http://uc.blogdetik.com/288/2888/files/2011/12/bg.png = background luar blog
http://uc.blogdetik.com/288/2888/files/2012/08/b7bc9942619288ea46caa27209f8af71_head-blog.png = header 897x 101
http://detik.net.id/wolipop/image/bg.gif = background dalam blog
http://uc.blogdetik.com/288/2888/files/2012/02/navbg1.png = background navigasi atas
http://uc.blogdetik.com/288/2888/files/2012/02/navbg2.png = background breadcrumbs
http://uc.blogdetik.com/288/2888/files/2012/02/navbg2.png = background footer

Pasang Code CSS di Widgets Any HTML Blogdetik.

Nah, semoga ke-3 code CSS diatas bisa berguna untuk anda…
Salam…
by Siomponk Network


TAGS Tips Blog Themes Themes Blogdetik CSS Code Merubah Themes Blogdetik


-

Author

Herry Rachman
@imherry
me on www.siomponk.com

Follow Me

Search

Recent Post


Categories

Archive