Saya akan ngeshare Portal untuk blog yang lumayan keren dan elegan yg saya buat sendiri yang bernama Portal Responsive AnonymousV1.. Silahkan lihat Screen shotnya dan scriptnya portal ini..
kalau ada Yg error atau bermasalah silahkan Chat me Oke
1. Taroh css di bawah ini di atas </head>
<style>
#welcomebox {
position: absolute;
margin: 27% 27% 27% 18%;
z-index: 1000000;
}#welcomeoverlay {
overflow: hidden;
}
html.webkit.chrome.win.js {
overflow: hidden;
}
.webkit.chrome.win.js {
overflow: hidden;
width: 100%;
}body {
overflow-y: scroll;
font-smoothing: antialiased;
}
#welcomeoverlay {
position: fixed !important;
z-index: 999999;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: #FFFFFF url(http://4.bp.blogspot.com/-rup0th2BfA0/U7LjqfCFl7I/AAAAAAAACmg/S_6wiIg9HYQ/s1600/world-map-digital-art-hd-wallpaper-1920x1200-2109.jpg) no-repeat top center;
}.social-icons.init.animated.bounceInDown ul li a {
position: relative;
right: 22px;
padding-right: 8px;
}/* Theme5 */
/* ------ */
.blurred {
background-size: 100%;
}
::-moz-selection {
background-color: #BD2626;
color: #fff;
}
::selection {
background-color: #BD2626;
color: #fff;
}
.text-holder {
font-family: 'Roboto', 'Helvetica', sans-serif;
}
.post-label:before,
.post-item .readmore:after,
.widget ul li a:before,
.widget .title h4:before {
font-family: fontAwesome;
font-style: normal;
}
.shadowed,
.map-holder,
.section-title,
.skill-item,
.text-holder,
.portfolio-item,
.exp-item,
.inner-section {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.back-paper .title {
text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.3);
-webkit-text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.3);
}
.back-paper .tagline,
.back-paper .social-icons ul li a,
.info-label {
text-shadow: 0px -1px 0px #363636;
-webkit-text-shadow: 0px -1px 0px #363636;
}
.transition,
.menu li,
.exp-item,
.skill-item,
.post-label,
.exp-holder .head {
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.text-holder,
.contact-form-holder,
.skill-item,
.map-holder,
.inner-section {
border: 4px solid #F3F2F1;
}
a {
outline: none!important;
text-decoration: none;
}
.section-home {
width: 900px;
height: 500px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.avatar-holder,
.avatar-holder .outer2,
.avatar-holder .outer1 {
width: 400px;
height: 400px;
}
.avatar-holder {
position: absolute;
border-radius: 300px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 50;
}
.avatar-holder:after {
content: "";
background-image: url(../images/glow.png);
position: absolute;
width: 100%;
height: 100%;
border-radius: 500px;
z-index: 100;
}
/* thumbnails style */
.avatar-holder img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
border-radius: 500px;
-moz-border-radius: 500px;
-webkit-border-radius: 500px;
box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
}
/* decorations style */
.avatar-holder .circle {
position: absolute;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.avatar-holder .outer1 {
top: -8px;
left: -8px;
z-index: 2;
border: 8px solid;
border-color: #363636;
box-shadow: 0 0 1px #363636;
-moz-box-shadow: 0 0 1px #363636;
-webkit-box-shadow: 0 0 1px #363636;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #150700 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #150700));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #150700 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #150700 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #150700 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%, #150700 100%);
transition: box-shadow 0.5s ease-out, border-color 1s;
-moz-transition: -moz-box-shadow 0.5s ease-out, border-color 1s;
-webkit-transition: -webkit-box-shadow 0.5s ease-out, border-color 1s;
}
.avatar-holder:hover .outer1 {
border-color: #000;
}
.avatar-holder .outer2 {
top: -10px;
left: -10px;
z-index: 1;
border: 10px solid;
border-color: #B52727;;
box-shadow: 0 0 2px red;
-moz-box-shadow: 0 0 2px red;
-webkit-box-shadow: 0 0 2px red;
opacity: 0;
transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transition: opacity 0.4s ease 0.1s, -moz-transform 0.4s ease-out 0.1s;
-moz-transition: opacity 0.4s ease 0.1s, -moz-transform 0.4s ease-out 0.1s;
-webkit-transition: opacity 0.4s ease 0.1s, -moz-transform 0.4s ease-out 0.1s;
}
.avatar-holder:hover .outer2 {
opacity: 1;
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
.menu-item a:hover {
text-decoration: none;
}
.menu-item a {
bottom: 0;
color: #363636;
display: block;
font-size: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: 100;
width: 100%;
height: 62%;
padding-top: 38%;
}
.menu-item.size-big,
.menu-item.size-big .outer1,
.menu-item.size-big .outer2 {
width: 100px;
height: 100px;
}
.menu-item.size-medium,
.menu-item.size-medium .outer1,
.menu-item.size-medium .outer2 {
width: 80px;
height: 80px;
}
.menu-item.size-small,
.menu-item.size-small .outer1,
.menu-item.size-small .outer2 {
width: 60px;
height: 60px;
}
.menu-item {
position: absolute;
opacity: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 300px;
z-index: 100;
left: 280px;
}
.safari .menu-items-holder,
.ie .menu-items-holder {
margin: 10% 25%;
}
.menu-items-holder {
position: absolute;
width: 100px;
height: 100px;
z-index: 1000;
}
.menu-item .circle {
position: absolute;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.menu-item .outer1 {
top: -8px;
left: -8px;
z-index: 2;
border: 8px solid;
border-color: #B52727;
box-shadow: 0 0 2px #333;
-moz-ox-shadow: 0 0 2px #333;
-webkit-box-shadow: 0 0 2px #333;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #f1f1f1 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #f1f1f1));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #f1f1f1 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #f1f1f1 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #f1f1f1 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%, #f1f1f1 100%);
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transition: transform 1.8s ease-in-out, box-shadow 1s ease-out, border-color 1.5s;
-moz-transition: -moz-transform 1.8s ease-in-out, -moz-box-shadow 1s ease-out, border-color 1.5s;
-webkit-transition: -webkit-transform 1.8s ease-in-out, -webkit-box-shadow 1s ease-out, border-color 1.5s;
}
.menu-item:hover .outer1 {
border-color: #363636 #000000 #363636 #000000;
box-shadow: 0 0 10px red;
-moz-box-shadow: 0 0 10px red;
-webkit-box-shadow: 0 0 10px red;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
.menu-item .outer2 {
top: -13px;
left: -13px;
z-index: 1;
border: 13px solid;
border-color: red #B52727 red #B52727;
box-shadow: 0 0 2px #333;
-moz-box-shadow: 0 0 2px #333;
-webkit-box-shadow: 0 0 2px #333;
opacity: 0;
transform: scale(1.3, 1.3) rotate(180deg);
-ms-transform: scale(1.3, 1.3) rotate(180deg);
-moz-transform: scale(1.3, 1.3) rotate(180deg);
-webkit-transform: scale(1.3, 1.3) rotate(180deg);
transition: opacity 0.5s, transform 0.7s ease-out;
-moz-transition: opacity 0.5s, -moz-transform 0.7s ease-out;
-webkit-transition: opacity 0.5s, -webkit-transform 0.7s ease-out;
}
.menu-item:hover .outer2 {
opacity: 0.9;
transform: scale(1, 1) rotate(-10deg);
-ms-transform: scale(1, 1) rotate(-10deg);
-moz-transform: scale(1, 1) rotate(-10deg);
-webkit-transform: scale(1, 1) rotate(-10deg);
}
.back-paper .title {
color: #fff;
}
.back-paper {
background-color: #BD2626;
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 10;
border-radius: 5px 5px 5px 0;
}
.back-paper {
-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2) inset;
}
.back-paper .tagline {
color: #fff;
padding-bottom: 7px;
}
.back-paper h1,
.back-paper h2,
.back-paper h3,
.back-paper h4 {
margin-bottom: 0;
margin-top: 0;
}
.back-paper .left-side {
float: left;
margin-top: 10px;
margin-left: 20px;
color: #363636;
}
.back-paper .right-side {
float: right;
margin-top: 10px;
margin-right: 20px;
width: 200px;
}
.back-paper .social-icons {
background-color: #363636;
border-radius: 0 0 5px 5px;
bottom: -40px;
left: 0;
padding: 10px 9px 7px;
position: absolute;
}
.social-icons ul li {
display: inline-block;
margin-left: 3px;
}
.social-icons ul li a:hover {
text-decoration: none;
}
.back-paper .social-icons ul li a {
color: #fff;
}
.social-icons li:hover a {
text-decoration: none;
}
.social-icons ul li a {
font-size: 25px;
display: block;
color: #363636;
font-family: fontAwesome;
font-style: normal;
text-decoration: none;
}
.social-icons .icon-facebook:hover {
color: #3B5998;
}
.social-icons .icon-twitter:hover {
color: #48C4D2;
}
.social-icons .icon-linkedin:hover {
color: #005180;
}
.social-icons .icon-google-plus:hover {
color: #D03924;
}
.social-icons .icon-google-plus:hover {
color: #D03924;
}
.social-icons .icon-pinterest:hover {
color: #CD2027;
}
.social-icons .icon-rss:hover {
color: #FE9900;
}
.social-icons ul li:first-child {
margin-left: 0;
}
.social-icons ul {
margin: 0;
list-style: none;
}
.info-label {
border: 2px groove #B52727;
border-radius: 4px;
-webkit-border-radius: 4px;
color: #FFFFFF;
font-size: 16px;
margin-bottom: 10px;
padding: 5px;
}
.info-label i {
color: #363636;
font-size: 20px;
}
@media all and (min-width:1100px) {
}
@media all and (min-width:760px) and (max-width:810px){
.portfolio-item .hover i {
left: 37%;
top: 36px;
}
.post-item .title h2 {
font-size: 24px;
}
.portfolio-item{
width: 320px;
}
.avatar img {
width: 300px;
}
}
@media all and (min-width:811px) and (max-width:1030px){
.info-holder .info-item {
margin-left: 30px;
}
}
@media all and (min-width:490px) and (max-width:810px){
.info-holder .info-item {
display: block;
margin-left: 0px;
}
.content-section{
width: 95%;
margin: 0 auto;
}
}
@media all and (min-width:400px) and (max-width:810px){
#home{
width: 95%;
height: 400px;
}
.blurred{
background-size: 140%;
}
.menu-item a {
font-size: 15px;
height: 68%;
padding-top: 32%;
}
.menu-item.size-big,.menu-item.size-big .outer1,.menu-item.size-big .outer2{
width:80px;
height:80px;
}
.menu-item.size-medium,.menu-item.size-medium .outer1,.menu-item.size-medium .outer2{
width:60px;
height:60px;
}
.menu-item.size-small,.menu-item.size-small .outer1,.menu-item.size-small .outer2{
width:40px;
height:40px;
}
.avatar-holder,.avatar-holder .outer2,.avatar-holder .outer1{
width:270px;
height:270px;
}
}
@media all and (min-width:801px){
}
@media all and (min-width:1px) and (max-width:650px){
.logo-image {
float: none;
}
.menu,.logo,.filter-options {
text-align: center;
}
.page-title {
padding-left: 20px;
}
}
@media all and (min-width:300px) and (max-width:610px){
.avatar-holder,.avatar-holder .outer2,.avatar-holder .outer1{
width:200px;
height:200px;
}
.blurred{
background-size: 200%;
}
.wrapper2{
width: 89%;
margin: 0 auto;
}
.back-paper h1 {
font-size: 25px;
}
.info-label i {
font-size: 15px;
}
.info-label {
font-size: 13px;
padding: 2px;
}
.back-paper .right-side,.back-paper .left-side {
width: 145px;
}
.back-paper h2{
font-size: 15px;
}
.back-paper h4{
font-size: 11px;
}
.map-holder{
width: 97%;
}
.portfolio-item .hover i {
left: 38%;
top: 35px;
}
#grid {
margin: 0 20%;
}
.avatar{
margin: 10px 13% 0 0;
}
.portfolio-item{
width: 300px;
}
.filter-options li{
margin-bottom: 10px;
}
}
@media all and (min-width:400px) and (max-width:500px){
#home{
width: 90%;
height: 400px;
}
}
@media all and (min-width:100px) and (max-width:500px){
.menu-item.size-big,.menu-item.size-big .outer1,.menu-item.size-big .outer2{
width:80px;
height:80px;
}
.menu-item.size-medium,.menu-item.size-medium .outer1,.menu-item.size-medium .outer2{
width:60px;
height:60px;
}
.menu-item.size-small,.menu-item.size-small .outer1,.menu-item.size-small .outer2{
width:40px;
height:40px;
}
.inner-section:before {
height: 94%;
top: 100px;
}
.map-holder {
width: 95.4%;
}
.avatar-holder,.avatar-holder .outer2,.avatar-holder .outer1{
width:150px;
height:150px;
}
.back-paper h1 {
font-size: 25px;
line-height: 24px;
}
.back-paper .right-side, .back-paper .left-side {
width: 111px;
}
.info-label i {
display: none;
}
.info-label {
font-size: 12px;
}
.back-paper .social-icons {
bottom: -31px;
padding: 6px 9px 4px;
}
.social-icons ul li a {
font-family: fontAwesome;
font-size: 20px;
}
.info-holder .info-item {
display: block;
margin-left: 0px;
}
.content-section{
width: 95%;
margin: 0 auto;
}
.portfolio-item .hover i {
font-size: 73px;
left: 38%;
top: 11px;
}
.portfolio-item .item-details .title {
margin-top: 47%;
}
.portfolio-item{
width: 240px;
}
.avatar {
margin: 20px 10px 0 0;
}
}
@media all and (min-width:100px) and (max-width:399px){
.back-paper .right-side, .back-paper .left-side {
display: none;
}
.map-holder {
width: 90%;
}
.date-range {
top: -7px;
}
.exp-holder h3 {
line-height: 22px;
font-size: 19px;
}
.exp-holder h4 {
font-size: 16px;
}
h1 {
font-size: 25.5px;
}
.menu-item {
left: 200px;
}
.menu-item a {
font-size: 15px;
height: 68%;
padding-top: 32%;
}
#home{
width: 90%;
height: 200px;
}
.blurred{
background-size: 250%;
}
.wrapper2{
width: 80%;
margin: 0 auto;
}
.home-text .text, .home-text p {
width: 90%;
}
.portfolio-item .hover i {
font-size: 46px;
left: 37%;
top: 2px;
}
.footer-section .social-icons{
text-align: center;
}
.post-item .title h2 {
font-size: 18px;
line-height: 18px;
}
.exp-holder .date-range {
float: left;
margin-bottom: 10px;
}
.map-holder {
width: 93.4%;
}
.single .thumb-holder {
width: 100%;
margin-right: 0;
}
.portfolio-item .item-details .title {
font-size: 13px;
}
.portfolio-item .item-details a {
font-size: 12px;
padding: 0 5px;
width: 136px;
}
.portfolio-item{
width: 140px;
}
}
@media all and (min-width:400px) and (max-width:490px){
.portfolio-item .hover i {
font-size: 55px;
left: 42%;
top: 18px;
}
}
</style>
Update Jika buletny udh ada tapi ga ada tulisannya silahkan copy dan paste css di bawah ini di atas </head> agar tulisannya ada.
<style>
.menu-item span {
bottom: 0;
cursor:pointer;
color: #363636;
display: block;
font-size: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: 100;
width: 100%;
height: 62%;
padding-top: 38%;
}
</style>
2. taroh link css dan js ini di atas </head>
{ <link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Download Semua fungsi Javascriptnya>>> javascript Portal Responsive AnonymousV1.txt
<<< Lalu taroh di atas </body> scriptny
<<< Lalu taroh di atas </body> scriptny
}
3. Taroh Script di bawah ini di bawah <body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>Semoga bermanfaat untuk kalian :3
<div id='welcomeoverlay'/>
<div id='welcomebox'>
<div class='wrapper2'>
<section class='page section-home' id='home'>
<div class='menu-items-holder hidden init'>
<a
onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>
<div class='menu-item size-big menu-portfolio'>
<div class='outer1 circle'/>
<div class='outer2 circle'/>
<span> Portfolio</span>
</div>
</a>
<a onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>
<div class='menu-item size-medium menu-about'>
<div class='outer1 circle'/>
<div class='outer2 circle'/>
<span> About</span>
</div>
</a>
<a onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>
<div class='menu-item size-small menu-blog'>
<div class='outer1 circle'/>
<div class='outer2 circle'/>
<span> Blog</span>
</div>
</a><a onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>
<div class='menu-item size-small menu-skills'>
<div class='outer1 circle'/>
<div class='outer2 circle'/>
<span>Skills</span>
</div>
</a>
<a onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>
<div class='menu-item size-medium menu-contact'>
<div class='outer1 circle'/>
<div class='outer2 circle'/>
<span>Contact</span>
</div>
</a>
</div>
<div class='avatar-holder hidden init'>
<div class='outer1 circle'/>
<div class='outer2 circle'/>
<img src='http://1.bp.blogspot.com/-RzayWewiHaQ/U7JyLQLm-YI/AAAAAAAACmQ/2XEcmykjvz4/s1600/anonymous_russia.jpg'/>
</div>
<div class='back-paper hidden init'>
<div class='left-side hidden init'>
<div class='titles-holder'>
<div class='title'>
<h1>Harris Munahar</h1>
</div>
<div class='tagline'>
<h4>Freelance Webdeveloper</h4>
</div>
</div>
<div class='info-label'>
<i class='icon-ok'/>
<span>Jquery: Available</span><br/>
<i class='icon-ok'/>
<span>Responsive: Available</span>
</div>
</div>
<div class='right-side hidden init'>
<div class='info-label'>
<i class='icon-phone'/>
<span>Tidak Ada</span>
</div>
<div class='info-label'>
<i class='icon-map-marker'/>
<span>Tangerang, Indonesian</span>
</div>
<div class='info-label'>
<i class='icon-envelope'/>
<span>harris@yahoo.com</span>
</div>
</div>
<div class='social-icons hidden init'>
<ul>
<li><a class=' icon-facebook' href='#'/></li>
<li><a class=' icon-twitter' href='#'/></li>
<li><a class=' icon-linkedin' href='#'/></li>
<li><a class='icon-pinterest' href='#'/></li>
<li><a class='icon-google-plus' href='#'/></li>
</ul>
</div>
</div>
</section>
</div>
</div>
</b:if>
kalau ada Yg error atau bermasalah silahkan Chat me Oke

Comments